"use client";

import React from "react";

export function SkeletonCard({ id }: { id?: string }) {
  return (
    <div
      id={id}
      className="relative flex flex-col rounded-[22px] overflow-hidden bg-white/[0.03] border border-white/10 aspect-[2/3] animate-pulse"
    >
      <div className="w-full h-full bg-gradient-to-t from-black/80 via-white/[0.04] to-white/[0.02]" />
      
      {/* Quality Badge Skeleton */}
      <div className="absolute top-2.5 right-2.5 w-14 h-5 rounded-full bg-white/10" />

      {/* Title Skeleton */}
      <div className="absolute bottom-0 left-0 right-0 p-3.5 space-y-2 bg-gradient-to-t from-black via-black/80 to-transparent">
        <div className="h-4 w-3/4 rounded bg-white/20" />
        <div className="h-3 w-1/2 rounded bg-white/10" />
      </div>
    </div>
  );
}