import { Meta, StoryObj } from '@storybook/react-vite'

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './card'
import { BellIcon, CheckIcon } from '@radix-ui/react-icons'
import { cn } from '@lib/utils'
import { Button } from '@components/ui/button/button'

const meta = {
  title: 'Card',
  component: Card,
  tags: ['autodocs'],
} satisfies Meta<typeof Card>

export default meta

export const Default: StoryObj<typeof meta> = {
  parameters: {
    docs: {
      description: {
        story:
          'The Card component is used to group related information in a single container.This means any other component can be placed inside the Card component.',
      },
    },
  },
  render: () => (
    <div className="flex items-center justify-center border rounded p-4">
      <Card className={cn('w-[380px]')}>
        <CardHeader>
          <CardTitle>Card Title</CardTitle>
          <CardDescription>You have 3 unread messages.</CardDescription>
        </CardHeader>
        <CardContent className="grid gap-4">
          <div className=" flex items-center space-x-4 rounded-md border p-4">
            <BellIcon />
            <div className="flex-1 space-y-1">
              <p className="text-sm font-medium leading-none">Push Notifications</p>
              <p className="text-sm text-muted-foreground">Send notifications to device.</p>
            </div>
          </div>
          <div>
            {notifications.map((notification, index) => (
              <div key={index} className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0">
                <span className="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
                <div className="space-y-1">
                  <p className="text-sm font-medium leading-none">{notification.title}</p>
                  <p className="text-sm text-muted-foreground">{notification.description}</p>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
        <CardFooter>
          <Button className="w-full">
            <CheckIcon className="mr-2 h-4 w-4" /> Mark all as read
          </Button>
        </CardFooter>
      </Card>
    </div>
  ),
}

// DATA ------------------------------------------------------------------------

const notifications = [
  {
    title: 'Your call has been confirmed.',
    description: '1 hour ago',
  },
  {
    title: 'You have a new message!',
    description: '1 hour ago',
  },
  {
    title: 'Your subscription is expiring soon!',
    description: '2 hours ago',
  },
]
