interface Props {
  count?: number;
}

export default function LoadingSkeleton({ count = 6 }: Props) {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" aria-live="polite" aria-busy="true">
      {Array.from({ length: count }).map((_, i) => (
        <div key={i} className="hms-card overflow-hidden">
          <div className="hms-skeleton aspect-[4/3]" style={{ borderRadius: 0 }}></div>
          <div className="p-4 space-y-3">
            <div className="hms-skeleton h-4 w-3/4"></div>
            <div className="hms-skeleton h-3 w-full"></div>
            <div className="hms-skeleton h-3 w-1/2"></div>
            <div className="flex justify-between items-center pt-2">
              <div className="hms-skeleton h-3 w-20"></div>
              <div className="hms-skeleton h-6 w-24" style={{ borderRadius: 'var(--radius-md)' }}></div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}
