"use client";

import { Card, CardHeader, CardBody, CardFooter, Skeleton } from "@heroui/react";

export default function ProductCardSkeleton() {
  return (
    <Card className="bg-bg-subtle dark:bg-gray-800 border border-border-gray dark:border-gray-700 shadow-lg h-full rounded-xl">
      {/* Product Header */}
      <CardHeader className="pb-6 px-6 pt-6">
        <div className="flex gap-4 items-center w-full">
          {/* Icon Skeleton */}
          <Skeleton className="rounded-2xl w-16 h-16 flex-shrink-0" />

          {/* Title and Category Skeleton */}
          <div className="flex flex-col gap-2 flex-1">
            <Skeleton className="h-6 w-32 rounded-lg" />
            <Skeleton className="h-5 w-24 rounded-full" />
          </div>
        </div>
      </CardHeader>

      <CardBody className="py-0 px-6">
        {/* Yield APY & Pool Cap Skeleton */}
        <div className="border-b border-gray-50 dark:border-gray-700 pb-6 flex">
          <div className="flex-1 flex flex-col gap-2">
            <Skeleton className="h-3 w-16 rounded" />
            <Skeleton className="h-8 w-20 rounded" />
          </div>
          <div className="flex-1 flex flex-col items-end gap-2">
            <Skeleton className="h-3 w-16 rounded" />
            <Skeleton className="h-8 w-24 rounded" />
          </div>
        </div>

        {/* Details Section Skeleton */}
        <div className="pt-6 flex flex-col gap-4">
          {/* Maturity & Risk */}
          <div className="flex gap-4">
            <div className="flex-1 flex flex-col gap-2">
              <Skeleton className="h-3 w-16 rounded" />
              <Skeleton className="h-5 w-24 rounded" />
            </div>
            <div className="flex-1 flex flex-col items-end gap-2">
              <Skeleton className="h-3 w-10 rounded" />
              <Skeleton className="h-5 w-20 rounded" />
            </div>
          </div>

          {/* Lock-Up & Circulating Supply */}
          <div className="flex gap-4">
            <div className="flex-1 flex flex-col gap-2">
              <Skeleton className="h-3 w-14 rounded" />
              <Skeleton className="h-5 w-20 rounded" />
            </div>
            <div className="flex-1 flex flex-col items-end gap-2">
              <Skeleton className="h-3 w-24 rounded" />
              <Skeleton className="h-5 w-16 rounded" />
            </div>
          </div>
        </div>
      </CardBody>

      {/* Pool Capacity & Invest Button Skeleton */}
      <CardFooter className="pt-8 pb-6 px-6 flex-col gap-4">
        <div className="flex flex-col gap-2 w-full">
          <div className="flex justify-between">
            <Skeleton className="h-3 w-24 rounded" />
            <Skeleton className="h-4 w-16 rounded" />
          </div>
          <Skeleton className="h-2 w-full rounded-full" />
        </div>
        <Skeleton className="h-10 w-full rounded-lg" />
      </CardFooter>
    </Card>
  );
}