import { BellRing, Check } from 'lucide-react'

import { Button } from '../button/button'
import * as Card from './card'
import { Switch } from '../switch/switch'

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',
  },
]

type CardProps = React.ComponentProps<typeof Card.Root>

export default function CardDemo({ ...props }: CardProps) {
  return (
    <Card.Root tw="w-[380px]" {...props}>
      <Card.Header>
        <Card.Title>Notifications</Card.Title>
        <Card.Description>You have 3 unread messages.</Card.Description>
      </Card.Header>
      <Card.Content tw="grid gap-4">
        <div tw=" flex items-center space-x-4 rounded-md border p-4">
          <BellRing />
          <div tw="flex-1 space-y-1">
            <p tw="text-sm font-medium leading-none">Push Notifications</p>
            <p tw="text-sm text-muted-foreground">
              Send notifications to device.
            </p>
          </div>
          <Switch />
        </div>
        <div>
          {notifications.map((notification, index) => (
            <div
              key={index}
              tw="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
            >
              <span tw="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
              <div tw="space-y-1">
                <p tw="text-sm font-medium leading-none">
                  {notification.title}
                </p>
                <p tw="text-sm text-muted-foreground">
                  {notification.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </Card.Content>
      <Card.Footer>
        <Button tw="w-full">
          <Check tw="mr-2 h-4 w-4" /> Mark all as read
        </Button>
      </Card.Footer>
    </Card.Root>
  )
}
