// @design-system: feedback/Skeleton
/**
 * BrowseCardSkeleton — loading placeholder mirroring DealCard.astro geometry
 * (aspect-square image + footer price strip) for /deals browse grid.
 */

import { Skeleton } from './Skeleton';

export function BrowseCardSkeleton() {
  return (
    <article
      aria-hidden="true"
      role="presentation"
      className="bg-surface-default border-border-default flex flex-col overflow-hidden rounded-2xl border shadow-md"
    >
      <Skeleton className="aspect-[4/3] w-full" />
      <div className="flex flex-col gap-1.5 p-3">
        <div className="flex items-center gap-1.5">
          <Skeleton className="h-6 w-6 rounded-full" />
          <Skeleton variant="text" className="w-24" />
        </div>
        <Skeleton variant="text" className="w-full" />
        <Skeleton variant="text" className="w-3/4" />
        <div className="mt-auto flex items-baseline gap-2 pt-1.5">
          <Skeleton variant="text" className="w-16 text-2xl" />
          <Skeleton variant="text" className="w-12 text-sm" />
        </div>
        <Skeleton className="h-1.5 w-full rounded-full" />
        <Skeleton variant="text" className="w-28 text-xs" />
      </div>
    </article>
  );
}