import { Button } from '../src/Button';
import { Placeholder, React } from '../src/Svg/index';

const primaryButtons = [
    {
        variant: "primary",
        iconPosition: false,
        size: "2xl",
    },
    {
        variant: "primary",
        iconPosition: "iconLeft",
        size: "2xl",
    },
    {
        variant: "primary",
        iconPosition: "iconRight",
        size: "2xl",
    },
    {
        variant: "primary",
        iconPosition: false,
        size: "xl",
    },
    {
        variant: "primary",
        iconPosition: "iconLeft",
        size: "xl",
    },
    {
        variant: "primary",
        iconPosition: "iconRight",
        size: "xl",
    },
    {
        variant: "primary",
        iconPosition: false,
        size: "lg",
    },
    {
        variant: "primary",
        iconPosition: "iconLeft",
        size: "lg",
    },
    {
        variant: "primary",
        iconPosition: "iconRight",
        size: "lg",
    },
    {
        variant: "primary",
        iconPosition: false,
        size: "md",
    },
    {
        variant: "primary",
        iconPosition: "iconLeft",
        size: "md",
    },
    {
        variant: "primary",
        iconPosition: "iconRight",
        size: "md",
    },
    {
        variant: "primary",
        iconPosition: false,
        size: "sm",
    },
    {
        variant: "primary",
        iconPosition: "iconLeft",
        size: "sm",
    },
    {
        variant: "primary",
        iconPosition: "iconRight",
        size: "sm",
    },
];
const secondaryButtons = [
    {
        variant: "secondary",
        iconPosition: false,
        size: "2xl",
    },
    {
        variant: "secondary",
        iconPosition: "iconLeft",
        size: "2xl",
    },
    {
        variant: "secondary",
        iconPosition: "iconRight",
        size: "2xl",
    },
    {
        variant: "secondary",
        iconPosition: false,
        size: "xl",
    },
    {
        variant: "secondary",
        iconPosition: "iconLeft",
        size: "xl",
    },
    {
        variant: "secondary",
        iconPosition: "iconRight",
        size: "xl",
    },
    {
        variant: "secondary",
        iconPosition: false,
        size: "lg",
    },
    {
        variant: "secondary",
        iconPosition: "iconLeft",
        size: "lg",
    },
    {
        variant: "secondary",
        iconPosition: "iconRight",
        size: "lg",
    },
    {
        variant: "secondary",
        iconPosition: false,
        size: "md",
    },
    {
        variant: "secondary",
        iconPosition: "iconLeft",
        size: "md",
    },
    {
        variant: "secondary",
        iconPosition: "iconRight",
        size: "md",
    },
    {
        variant: "secondary",
        iconPosition: false,
        size: "sm",
    },
    {
        variant: "secondary",
        iconPosition: "iconLeft",
        size: "sm",
    },
    {
        variant: "secondary",
        iconPosition: "iconRight",
        size: "sm",
    },
];
const plainButtons = [
    {
        variant: "plain",
        iconPosition: false,
        size: "2xl",
    },
    {
        variant: "plain",
        iconPosition: "iconLeft",
        size: "2xl",
    },
    {
        variant: "plain",
        iconPosition: "iconRight",
        size: "2xl",
    },
    {
        variant: "plain",
        iconPosition: false,
        size: "xl",
    },
    {
        variant: "plain",
        iconPosition: "iconLeft",
        size: "xl",
    },
    {
        variant: "plain",
        iconPosition: "iconRight",
        size: "xl",
    },
    {
        variant: "plain",
        iconPosition: false,
        size: "lg",
    },
    {
        variant: "plain",
        iconPosition: "iconLeft",
        size: "lg",
    },
    {
        variant: "plain",
        iconPosition: "iconRight",
        size: "lg",
    },
    {
        variant: "plain",
        iconPosition: false,
        size: "md",
    },
    {
        variant: "plain",
        iconPosition: "iconLeft",
        size: "md",
    },
    {
        variant: "plain",
        iconPosition: "iconRight",
        size: "md",
    },
    {
        variant: "plain",
        iconPosition: false,
        size: "sm",
    },
    {
        variant: "plain",
        iconPosition: "iconLeft",
        size: "sm",
    },
    {
        variant: "plain",
        iconPosition: "iconRight",
        size: "sm",
    },
];

export const ButtonsSection = () => {
  return <>
      <h2 className="mb-4">Buttons</h2>
      <div className="button-grid mb-8">
          {[...primaryButtons, ...secondaryButtons, ...plainButtons].map(
              (el) => (
                  <div>
                      <Button
                          variant={
                              el?.variant as "primary" | "secondary" | "plain" | undefined
                          }
                          {...(el?.iconPosition === "iconLeft" && {
                              iconLeft: <Placeholder />,
                          })}
                          {...(el?.iconPosition === "iconRight" && {
                              iconRight: <Placeholder />,
                          })}
                          size={el?.size as "2xl" | "xl" | "lg" | "md" | "sm"}
                          onClick={() => console.log("you clicked?")}
                      >
                          Button
                      </Button>
                  </div>
              )
          )}
      </div>
  </>;
}