import React from "react";
import { Meta, StoryFn } from "@storybook/react";
import { Button, ButtonProps } from "./Button";
import { CloseIcon, FacebookLogo, GoogleLogo } from "../../../icons";
import { Circle } from "lucide-react";

export default {
  title: "Atoms/Button",
  component: Button,
} as Meta;

const Template: StoryFn<ButtonProps> = (args) => <Button {...args} />;

export const SubmitButton = Template.bind({});
SubmitButton.args = {
  children: "Submit",
  variant: "primary",
  size: "md",
  disabled: false,
};
export const ResourcesButton = Template.bind({});
ResourcesButton.args = {
  children: "Resources",
  variant: "primary-outline",
  size: "sm",
  disabled: false,
};
export const Default = Template.bind({});
Default.args = {
  children: "Button CTA",
  variant: "primary",
  size: "md",
  disabled: false,
};
export const PrimaryButton = Template.bind({});
PrimaryButton.args = {
  children: "Button CTA",
  variant: "primary",
  size: "sm",
  disabled: false,
  leftIcon: <Circle height={20} width={20} />,
  rightIcon: <Circle height={20} width={20} />,
};
export const SecondaryButton = Template.bind({});
SecondaryButton.args = {
  children: "Button CTA",
  variant: "primary-outline",
  size: "sm",
  disabled: false,
  leftIcon: <Circle height={20} width={20} />,
  rightIcon: <Circle height={20} width={20} />,
};
export const TeritaryButton = Template.bind({});
TeritaryButton.args = {
  children: "Button CTA",
  variant: "primary-tertiary",
  size: "sm",
  disabled: false,
  leftIcon: <Circle height={20} width={20} />,
  rightIcon: <Circle height={20} width={20} />,
};
export const LinkButton = Template.bind({});
LinkButton.args = {
  children: "Button CTA",
  variant: "primary-link",
  size: "link",
  disabled: false,
  leftIcon: <Circle height={20} width={20} />,
  rightIcon: <Circle height={20} width={20} />,
};
export const Disabled = Template.bind({});
Disabled.args = {
  children: "Disabled",
  variant: "error-outline",
  size: "md",
  disabled: true,
};
export const IconPrimary = Template.bind({});
IconPrimary.args = {
  children: "",
  leftIcon: <CloseIcon className="fill-current" />,
  variant: "error-outline",
  size: "md",
  disabled: false,
};

export const GoogleLoginButton = Template.bind({});
GoogleLoginButton.args = {
  children: "Sign in with Google",
  leftIcon: <GoogleLogo />,
  variant: "gray-outline",
  size: "sm",
  disabled: false,
  className: "font-inter gap-3 py-2.5 px-4",
};

export const GoogleIconButton = Template.bind({});
GoogleIconButton.args = {
  children: "",
  leftIcon: <GoogleLogo />,
  variant: "gray-outline",
  size: "icon-md",
  disabled: false,
};
export const GoogleLoginButtonGray = Template.bind({});
GoogleLoginButtonGray.args = {
  children: "Sign in with Google",
  leftIcon: (
    <GoogleLogo
      fill="currentColor"
      className="text-mono-400 group-hover/login:text-mono-500"
    />
  ),
  variant: "gray-outline",
  size: "sm",
  disabled: false,
  className: "font-inter gap-3 py-2.5 px-4 group/login",
};
export const GoogleLoginIconGray = Template.bind({});
GoogleLoginIconGray.args = {
  children: "",
  leftIcon: (
    <GoogleLogo
      fill="currentColor"
      className="text-mono-400 group-hover/login:text-mono-500"
    />
  ),
  variant: "gray-outline",
  size: "icon-sm",
  disabled: false,
  className: "font-inter gap-3 group/login",
};
export const FacebookLoginButton = Template.bind({});
FacebookLoginButton.args = {
  children: "Sign in with Facebook",
  leftIcon: <FacebookLogo />,
  variant: "primary",
  size: "icon-md",
  disabled: false,
  className: "font-inter gap-3 py-2.5 px-4",
};
export const FacebookIconButton = Template.bind({});
FacebookIconButton.args = {
  children: "",
  leftIcon: <FacebookLogo />,
  variant: "primary",
  size: "icon-md",
  disabled: false,
};
export const FacebookIconGray = Template.bind({});
FacebookIconGray.args = {
  children: "",
  leftIcon: (
    <FacebookLogo
      fill="currentColor"
      className="text-mono-400 group-hover/login:text-mono-500"
    />
  ),
  variant: "gray-outline",
  size: "icon-md",
  disabled: false,
};

export const Nav = Template.bind({});
Nav.args = {
  children: "Nav",
  variant: "nav",
};

export const Simple = Template.bind({});
Simple.args = {
  children: 'Simple',
  variant: 'simple',
};
