export default function DetailSkeleton() {
  return (
    <div>
      <div className="relative h-[68vh] min-h-[520px] -mt-14 overflow-hidden">
        <div className="absolute inset-0 skeleton" />
        <div className="absolute inset-0 bg-gradient-to-r from-void via-void/60 to-void/10" />
        <div className="absolute inset-0 bg-gradient-to-t from-void via-void/30 to-transparent" />
        <div className="relative h-full flex items-end pb-12 px-7 gap-8">
          <div className="hidden md:block w-[200px] aspect-[2/3] skeleton rounded-xl shrink-0" />
          <div className="flex-1 space-y-4">
            <div className="skeleton h-5 w-24 rounded" />
            <div className="skeleton h-12 w-2/3 rounded" />
            <div className="skeleton h-4 w-1/3 rounded" />
            <div className="flex gap-2 mt-2">
              <div className="skeleton h-11 w-28 rounded-lg" />
              <div className="skeleton h-11 w-32 rounded-lg" />
              <div className="skeleton h-11 w-11 rounded-lg" />
            </div>
          </div>
        </div>
      </div>
      <div className="px-7 py-6 space-y-6">
        <div className="skeleton h-3 w-20 rounded" />
        <div className="skeleton h-3 w-full rounded" />
        <div className="skeleton h-3 w-full rounded" />
        <div className="skeleton h-3 w-3/4 rounded" />
      </div>
    </div>
  )
}
