Notification Panel

import {
  Avatar,
  AvatarFallback,
  Badge,
  Button,
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
  Reveal,
} from "@cooud-ui/ui";

export function NotificationPanelBlock() {
  return (
    <div className="flex w-full items-center justify-center py-4">
      <Card className="w-full max-w-sm gap-0 p-0 shadow-lg">
        <CardHeader className="flex flex-row items-center justify-between gap-2 border-border border-b p-4">
          <div className="flex items-center gap-2">
            <CardTitle className="text-base">Notifications</CardTitle>
            <Badge variant="primary">3 new</Badge>
          </div>
          <Button variant="ghost" size="sm" className="text-fg-secondary">
            Mark all read
          </Button>
        </CardHeader>

        <CardContent className="flex flex-col p-0">
          <Reveal delay={0.04}>
            <div className="flex items-start gap-3 bg-surface-overlay/40 px-4 py-3">
              <Avatar className="size-9">
                <AvatarFallback>DL</AvatarFallback>
              </Avatar>
              <div className="flex min-w-0 flex-1 flex-col gap-0.5">
                <p className="text-sm text-fg-secondary">
                  <span className="font-medium text-fg">Devon Lane</span> commented on the Atlas brief.
                </p>
                <span className="text-fg-tertiary text-xs">2m ago</span>
              </div>
              <span className="mt-1 size-2 shrink-0 rounded-full bg-primary" aria-hidden="true" />
            </div>
          </Reveal>

          <Reveal delay={0.08}>
            <div className="flex items-start gap-3 bg-surface-overlay/40 px-4 py-3">
              <Avatar className="size-9">
                <AvatarFallback>MC</AvatarFallback>
              </Avatar>
              <div className="flex min-w-0 flex-1 flex-col gap-0.5">
                <p className="text-sm text-fg-secondary">
                  <span className="font-medium text-fg">Mara Castillo</span> assigned you to Q3 roadmap.
                </p>
                <span className="text-fg-tertiary text-xs">18m ago</span>
              </div>
              <span className="mt-1 size-2 shrink-0 rounded-full bg-primary" aria-hidden="true" />
            </div>
          </Reveal>

          <Reveal delay={0.12}>
            <div className="flex items-start gap-3 bg-surface-overlay/40 px-4 py-3">
              <Avatar className="size-9">
                <AvatarFallback>RK</AvatarFallback>
              </Avatar>
              <div className="flex min-w-0 flex-1 flex-col gap-0.5">
                <p className="text-sm text-fg-secondary">
                  <span className="font-medium text-fg">Riley Kim</span> requested your review on PR #482.
                </p>
                <span className="text-fg-tertiary text-xs">1h ago</span>
              </div>
              <span className="mt-1 size-2 shrink-0 rounded-full bg-primary" aria-hidden="true" />
            </div>
          </Reveal>

          <Reveal delay={0.16}>
            <div className="flex items-start gap-3 px-4 py-3">
              <Avatar className="size-9">
                <AvatarFallback>JP</AvatarFallback>
              </Avatar>
              <div className="flex min-w-0 flex-1 flex-col gap-0.5">
                <p className="text-sm text-fg-secondary">
                  <span className="font-medium text-fg">Jordan Pierce</span> shared a file with your team.
                </p>
                <span className="text-fg-tertiary text-xs">3h ago</span>
              </div>
            </div>
          </Reveal>

          <Reveal delay={0.2}>
            <div className="flex items-start gap-3 px-4 py-3">
              <Avatar className="size-9">
                <AvatarFallback>ST</AvatarFallback>
              </Avatar>
              <div className="flex min-w-0 flex-1 flex-col gap-0.5">
                <p className="text-sm text-fg-secondary">
                  <span className="font-medium text-fg">Sasha Tran</span> closed the issue you reported.
                </p>
                <span className="text-fg-tertiary text-xs">Yesterday</span>
              </div>
            </div>
          </Reveal>
        </CardContent>

        <CardFooter className="justify-center border-border border-t p-2">
          <Button variant="ghost" size="sm" className="w-full text-primary">
            View all notifications
          </Button>
        </CardFooter>
      </Card>
    </div>
  );
}