import { absYCenter } from "@collie-ui/css";
import { makeStyled } from "@colliejs/react";
import { collieConfig } from "../collie.config";
export const styled = makeStyled(collieConfig);

export const StyledButton = styled("button", {
  w: 100,
  h: 40,
  _hover: {
    opacity: 0.8,
    background: "$primary",
    borderRadius: 10,
    color: "white",
  },
  _after: {
    h: "100%",
    w: [10, 4],
    background: "red",
    ...absYCenter({ right: 0 }),//obj=eval('Function') => css(obj)=>cssText. cssObject/styledObject
  },

  variants: {
    size: {
      full: {
        w: "100%",
      },
      big: {
        w: 80,
      },
      md: {
        w: 40,
      },
      sm: {
        w: 20,
      },
      dynamic: x => ({
        //any size you want
        w: x,
      }),
    },
    shape: {
      round: {
        borderRadius: 9999,
      },
      rect: {
        borderRadius: 0,
      },
    },
    status: {
      disabled: {
        true: {
          cursor: "not-allowed",
          background: "$gray200",
        },
      },
    },
  },

  compoundVariants: { 
    type:{
      title:{
        size: "big",
        shape: ?"round":'',
        css: {
          background: "$gray200",
        },
      },

      subTitle:{
        size: "md",
        shape: "rect",
        css: {
          background: "$gray200",
        },
    }
  }

  [
    {
      size: "big",
      shape: "round",
      css: {
        background: "$gray200",
      },
    },
  ],
  defaultVariants: {
    shape: "rect",
  },
});

const App = (props)=> {
  return <Button shape="round" disabled={props.disabled} css={{background:'red'}}>Login<Button/>
}