import { Story, Meta } from "@storybook/react";

import { CardProps } from "./Card";
import Card, {
  CardBody,
  CardContent,
  CardFooter,
  CardHeader,
  CardImage,
} from "./";
import Block from "../../atoms/Block";
import Button from "../../atoms/Button";

export default {
  title: "Component/Compounds/Card",
  component: Card,
  parameters: {
    component: Card,
    previewTabs: {
      canvas: {
        hidden: true,
      },
    },
    viewMode: "docs",
  },
} as Meta;

interface ExampleProps {
  children?: React.ReactNode;
  classes: string;
}

const Template: Story<CardProps> = (args) => (
  <Card {...args}>
    <CardHeader title={"Card title"} subTitle={"Card subtitle"} />
    <CardBody>
      <CardImage src={""} />
      <CardContent></CardContent>
    </CardBody>
    <CardFooter>
      <Button variation="primary">Order</Button>
      <Button variation="default">View</Button>
    </CardFooter>
  </Card>
);

const Example: Story<ExampleProps> = (args) => {
  const classes = args.classes;
  return classes ? (
    <Block className={args.classes}>{args.children}</Block>
  ) : (
    <>{args.children}</>
  );
};

export const Properties = Template.bind({});
Properties.args = {};

export const CardWithContent = Example.bind({});
CardWithContent.args = {
  children: (
    <Card classes={{ root: "max-w-sm w-full" }}>
      <CardHeader title={"Card title"} subTitle={"Card subtitle"} />
      <CardBody>
        <CardImage src={""} />
        <CardContent>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in
          tempus felis, quis interdum magna. Aliquam erat volutpat. Quisque
          massa arcu, faucibus at suscipit non, ultricies sed diam. Sed accumsan
          pellentesque sodales. Etiam scelerisque faucibus diam vel tincidunt.
          Integer non consequat nisl, sit amet pharetra mi.
        </CardContent>
      </CardBody>
      <CardFooter>
        <Button variation="primary" className="text-sm">
          Order
        </Button>
        <Button variation="default" className="text-sm">
          View
        </Button>
      </CardFooter>
    </Card>
  ),
  classes: "flex items-center justify-center w-full",
};
