import { Button } from '@/coop-ui/Button';
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/coop-ui/Card';
import { Input } from '@/coop-ui/Input';
import { Label } from '@/coop-ui/Label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/coop-ui/Select';
import { Meta } from '@storybook/react';

interface CardProps extends React.ComponentProps<typeof Card> {}

export default {
  title: 'Components/Card',
  component: Card,
  argTypes: {
    className: { control: 'text' },
  },
} as Meta<CardProps>;

export const Default = () => (
  <Card className="w-[350px]">
    <CardContent>Card Content Slot</CardContent>
  </Card>
);

export const Slots = () => (
  <Card className="w-[350px]">
    <CardHeader>
      <CardTitle>Card Title Slot</CardTitle>
      <CardDescription>Card Description Slot</CardDescription>
    </CardHeader>
    <CardContent>Card Content Slot</CardContent>
    <CardFooter>Card Footer Slot</CardFooter>
  </Card>
);

export const SlotsExample = () => (
  <Card className="w-[350px]">
    <CardHeader>
      <CardTitle>Create project</CardTitle>
      <CardDescription>Deploy your new project in one-click.</CardDescription>
    </CardHeader>
    <CardContent>
      <form>
        <div className="grid w-full items-center gap-4">
          <div className="flex flex-col space-y-1.5">
            <Label htmlFor="name">Name</Label>
            <Input id="name" placeholder="Name of your project" />
          </div>
          <div className="flex flex-col space-y-1.5">
            <Label htmlFor="framework">Framework</Label>
            <Select>
              <SelectTrigger id="framework">
                <SelectValue placeholder="Select" />
              </SelectTrigger>
              <SelectContent position="popper">
                <SelectItem value="next">Next.js</SelectItem>
                <SelectItem value="sveltekit">SvelteKit</SelectItem>
                <SelectItem value="astro">Astro</SelectItem>
                <SelectItem value="nuxt">Nuxt.js</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>
      </form>
    </CardContent>
    <CardFooter className="flex justify-between">
      <Button variant="outline">Cancel</Button>
      <Button>Deploy</Button>
    </CardFooter>
  </Card>
);
