"use client";

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

export default function ProductCardListSkeleton() {
  return (
    <Card className="bg-bg-subtle dark:bg-gray-800 border border-border-gray dark:border-gray-700 rounded-xl">
      <CardBody className="py-6 px-8">
        <div className="flex flex-row items-center justify-between">
          {/* Icon and Title - Fixed width */}
          <div className="flex flex-row gap-4 items-center justify-start w-[280px] flex-shrink-0">
            <Skeleton className="rounded-md w-10 h-[30px] flex-shrink-0" />
            <div className="flex flex-col gap-2 items-start min-w-0 flex-1">
              <Skeleton className="h-3 w-16 rounded" />
              <Skeleton className="h-4 w-32 rounded" />
            </div>
          </div>

          {/* Middle section with stats */}
          <div className="flex flex-row items-center justify-between flex-1 px-12">
            {/* Lock-up */}
            <div className="flex flex-col gap-2 items-start w-[120px] flex-shrink-0">
              <Skeleton className="h-3 w-12 rounded" />
              <Skeleton className="h-4 w-20 rounded" />
            </div>

            {/* Pool Cap */}
            <div className="flex flex-col gap-2 items-start w-[100px] flex-shrink-0">
              <Skeleton className="h-3 w-16 rounded" />
              <Skeleton className="h-4 w-16 rounded" />
            </div>

            {/* Pool Capacity */}
            <div className="flex flex-col gap-2 items-start w-[260px] flex-shrink-0">
              <Skeleton className="h-3 w-20 rounded" />
              <div className="flex flex-row gap-3 items-center">
                <Skeleton className="rounded-full w-24 h-2" />
                <Skeleton className="h-4 w-16 rounded" />
              </div>
            </div>
          </div>

          {/* Invest Button */}
          <div className="flex-shrink-0">
            <Skeleton className="h-10 w-24 rounded-lg" />
          </div>
        </div>
      </CardBody>
    </Card>
  );
}
