Comment Thread

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
  Button,
  Card,
  CardContent,
  Separator,
  Textarea,
} from "@cooud-ui/ui";
import { Heart } from "lucide-react";

export function CommentThreadBlock() {
  return (
    <div className="flex w-full items-center justify-center py-4">
      <Card className="w-full max-w-xl gap-5 shadow-lg">
        <CardContent className="flex flex-col gap-5 pt-6">
          <div className="flex items-start gap-3">
            <Avatar className="size-9">
              <AvatarImage src="https://i.pravatar.cc/80?img=5" alt="You" />
              <AvatarFallback className="bg-surface-overlay text-xs text-fg-secondary">
                YO
              </AvatarFallback>
            </Avatar>
            <div className="flex flex-1 flex-col gap-2">
              <Textarea
                id="comment-composer"
                placeholder="Add a comment…"
                aria-label="Add a comment"
                rows={2}
              />
              <div className="flex justify-end">
                <Button variant="gradient" size="sm">
                  Post
                </Button>
              </div>
            </div>
          </div>

          <Separator />

          <div className="flex flex-col gap-5">
            <div className="flex items-start gap-3">
              <Avatar className="size-9">
                <AvatarImage src="https://i.pravatar.cc/80?img=32" alt="Diego Lima" />
                <AvatarFallback className="bg-surface-overlay text-xs text-fg-secondary">
                  DL
                </AvatarFallback>
              </Avatar>
              <div className="flex flex-1 flex-col gap-1.5">
                <div className="flex items-center gap-2">
                  <span className="text-sm font-medium text-fg">Diego Lima</span>
                  <span className="text-xs text-fg-tertiary">1h</span>
                </div>
                <p className="text-sm leading-6 text-fg-secondary">
                  This is exactly what we needed. The token layer makes theming painless.
                </p>
                <div className="flex items-center gap-1">
                  <Button variant="ghost" size="sm" className="gap-1.5" aria-label="Like comment">
                    <Heart className="size-3.5" aria-hidden="true" />
                    <span className="text-xs font-medium">9</span>
                  </Button>
                  <Button
                    variant="ghost"
                    size="sm"
                    className="text-xs"
                    aria-label="Reply to Diego Lima"
                  >
                    Reply
                  </Button>
                </div>

                <div className="ml-11 mt-1 flex items-start gap-3 border-l border-border pl-4">
                  <Avatar className="size-8">
                    <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 flex-1 flex-col gap-1.5">
                    <div className="flex items-center gap-2">
                      <span className="text-sm font-medium text-fg">Mara Castillo</span>
                      <span className="text-xs text-fg-tertiary">42m</span>
                    </div>
                    <p className="text-sm leading-6 text-fg-secondary">
                      Agreed — and it ships accessible by default, so we review less.
                    </p>
                    <div className="flex items-center gap-1">
                      <Button variant="ghost" size="sm" className="gap-1.5" aria-label="Like reply">
                        <Heart className="size-3.5" aria-hidden="true" />
                        <span className="text-xs font-medium">4</span>
                      </Button>
                      <Button
                        variant="ghost"
                        size="sm"
                        className="text-xs"
                        aria-label="Reply to Mara Castillo"
                      >
                        Reply
                      </Button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div className="flex items-start gap-3">
              <Avatar className="size-9">
                <AvatarImage src="https://i.pravatar.cc/80?img=47" alt="Priya Raman" />
                <AvatarFallback className="bg-surface-overlay text-xs text-fg-secondary">
                  PR
                </AvatarFallback>
              </Avatar>
              <div className="flex flex-1 flex-col gap-1.5">
                <div className="flex items-center gap-2">
                  <span className="text-sm font-medium text-fg">Priya Raman</span>
                  <span className="text-xs text-fg-tertiary">28m</span>
                </div>
                <p className="text-sm leading-6 text-fg-secondary">
                  Bookmarking this for our next migration. Great work to the whole team.
                </p>
                <div className="flex items-center gap-1">
                  <Button variant="ghost" size="sm" className="gap-1.5" aria-label="Like comment">
                    <Heart className="size-3.5" aria-hidden="true" />
                    <span className="text-xs font-medium">6</span>
                  </Button>
                  <Button
                    variant="ghost"
                    size="sm"
                    className="text-xs"
                    aria-label="Reply to Priya Raman"
                  >
                    Reply
                  </Button>
                </div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}