Post Card

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
  Button,
  Card,
  CardContent,
  CardHeader,
} from "@cooud-ui/ui";
import { Bookmark, Heart, MessageCircle, MoreHorizontal, Repeat2, Share } from "lucide-react";

export function PostCardBlock() {
  return (
    <div className="flex w-full items-center justify-center py-4">
      <Card className="w-full max-w-xl gap-4 shadow-lg">
        <CardHeader className="flex flex-row items-center gap-3">
          <Avatar className="size-10">
            <AvatarImage src="https://i.pravatar.cc/80?img=12" alt="Mara Castillo" />
            <AvatarFallback className="bg-surface-overlay text-xs text-fg-secondary">
              MC
            </AvatarFallback>
          </Avatar>
          <div className="flex min-w-0 flex-1 flex-col">
            <span className="truncate font-display text-sm font-semibold text-fg">
              Mara Castillo
            </span>
            <span className="truncate text-xs text-fg-tertiary">@maracastillo · 2h</span>
          </div>
          <Button variant="ghost" size="icon" aria-label="Post actions">
            <MoreHorizontal className="size-4" aria-hidden="true" />
          </Button>
        </CardHeader>

        <CardContent className="flex flex-col gap-4">
          <p className="text-sm leading-6 text-fg-secondary">
            Shipped the new design system today and the team is already moving faster. Consistent
            tokens, accessible defaults, and components that just compose. This is the foundation
            we&apos;ve wanted for ages.
          </p>

          <div className="flex items-center gap-1">
            <Button variant="ghost" size="sm" className="gap-1.5 text-error" aria-label="Like post">
              <Heart className="size-4 fill-current" aria-hidden="true" />
              <span className="text-xs font-medium">248</span>
            </Button>
            <Button variant="ghost" size="sm" className="gap-1.5" aria-label="Comment on post">
              <MessageCircle className="size-4" aria-hidden="true" />
              <span className="text-xs font-medium">37</span>
            </Button>
            <Button variant="ghost" size="sm" className="gap-1.5" aria-label="Repost">
              <Repeat2 className="size-4" aria-hidden="true" />
              <span className="text-xs font-medium">12</span>
            </Button>
            <div className="ml-auto flex items-center gap-1">
              <Button variant="ghost" size="icon" aria-label="Bookmark post">
                <Bookmark className="size-4" aria-hidden="true" />
              </Button>
              <Button variant="ghost" size="icon" aria-label="Share post">
                <Share className="size-4" aria-hidden="true" />
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}