// src/components/home-slider/streaming-hero-home-skeleton.tsx
"use client";

import React from "react";

const StreamingHeroHomeSkeleton: React.FC = () => {
  return (
    <div className="relative h-screen flex items-center bg-gray-900">
      {/* Overlay */}
      <div className="absolute inset-0 bg-black/60" />

      <div className="container mx-auto">
        <div className="relative max-w-2xl space-y-6 px-4 md:px-6 text-white animate-pulse">
          {/* Title Placeholder */}
          <div className="h-16 w-3/4 rounded bg-gray-800"></div>

          {/* Metadata Placeholder */}
          <div className="flex items-center space-x-4">
            <div className="h-7 w-24 rounded bg-gray-800"></div>
            <div className="h-5 w-16 rounded bg-gray-800"></div>
            <div className="h-5 w-20 rounded bg-gray-800"></div>
          </div>

          {/* Description Placeholder */}
          <div className="space-y-2">
            <div className="h-4 w-full rounded bg-gray-800"></div>
            <div className="h-4 w-full rounded bg-gray-800"></div>
            <div className="h-4 w-10/12 rounded bg-gray-800"></div>
          </div>

          {/* Genres/Starring Placeholders */}
          <div className="space-y-3 pt-2">
            <div className="h-4 w-1/2 rounded bg-gray-800"></div>
            <div className="h-4 w-2/3 rounded bg-gray-800"></div>
          </div>

          {/* Button Placeholder */}
          <div className="flex space-x-4 pt-4">
            <div className="h-12 w-36 rounded-full bg-gray-800"></div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default StreamingHeroHomeSkeleton;