import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Clock, Play } from "lucide-react";
import Image from "next/image";

export function EpisodeCards({ section }: { section: "podcast" | "main" }) {
  // Sample episode data
  const episodes = [
    {
      id: 1,
      title: "قسمت سوم",
      description:
        "هر قسمت از “پارچ کست” با رویکردی خلاقانه و engaging تولید می‌شود و هدف آن ایجاد فضایی است که در آن گوش دادن به اطلاعات جدید همزمان با لذت و سرگرمی همراه باشد.",
      duration: "52 دقیقه",
      date: "18 آذر, 1403",
      image: "https://picsum.photos/200",
    },
    {
      id: 3,
      title: "قسمت اول",
      description:
        "هر قسمت از “پارچ کست” با رویکردی خلاقانه و engaging تولید می‌شود و هدف آن ایجاد فضایی است که در آن گوش دادن به اطلاعات جدید همزمان با لذت و سرگرمی همراه باشد.",
      duration: "30 دقیقه",
      date: "18 آذر, 1403",
      image: "https://picsum.photos/200",
    },
    {
      id: 4,
      title: "قسمت اول",
      description:
        "هر قسمت از “پارچ کست” با رویکردی خلاقانه و engaging تولید می‌شود و هدف آن ایجاد فضایی است که در آن گوش دادن به اطلاعات جدید همزمان با لذت و سرگرمی همراه باشد.",
      duration: "30 دقیقه",
      date: "18 آذر, 1403",
      image: "https://picsum.photos/200",
    },
  ];

  return (
    <section
      className={`${section === "main" ? "py-8 md:py-16 lg:py-20" : ""}`}
    >
      <div className={`${section === "main" ? "container" : ""}`}>
        <div className="flex items-start justify-between gap-4 flex-row md:items-center">
          <div>
            <h2
              className={`${
                section === "main"
                  ? "lg:text-4xl md:text-3xl text-2xl font-bold tracking-tight text-parch leading-normal"
                  : "md:text-3xl sm:text-xl font-bold leading-normal "
              }`}
            >
              آخرین قسمت ها
            </h2>
            <p className="text-muted-foreground text-xs sm:text-base">
              از جدیدترین مکالمات ما مطلع شوید
            </p>
          </div>
          <Button variant="link" className="gap-1 pe-0 text-xs md:text-sm">
            مشاهده همه قسمت ها
          </Button>
        </div>
        <div
          className={`mt-8 grid lg:gap-6 md:gap-4 gap-2 grid-cols-2 ${
            section === "main" ? "lg:grid-cols-4" : "lg:grid-cols-3"
          }`}
        >
          {episodes.map((episode) => (
            <Card
              key={episode.id}
              className="flex flex-col overflow-hidden pt-0 border-parch cursor-pointer md:pb-6 pb-3 md:gap-6 gap-3 md:rounded-xl rounded-lg"
            >
              <div className="aspect-video w-full overflow-hidden">
                <Image
                  src={episode.image || "/placeholder.svg"}
                  alt={episode.title}
                  width={200}
                  height={200}
                  className="h-full w-full object-cover transition-all hover:scale-105"
                />
              </div>
              <CardHeader className="md:px-6 px-2">
                <CardTitle className="text-sm md:text-base">
                  {episode.title}
                </CardTitle>
                <CardDescription className="text-xs md:text-sm">
                  {episode.date}
                </CardDescription>
              </CardHeader>
              <CardContent className="md:px-6 px-2 text-xs md:text-sm">
                <p className="line-clamp-3 text-sm text-muted-foreground">
                  {episode.description}
                </p>
              </CardContent>
              <CardFooter className="flex items-center justify-between md:px-6 px-2">
                <div className="flex items-center text-muted-foreground text-xs md:text-sm">
                  <Clock className="ml-1 md:h-4 md:w-4 h-3.5 w-3.5" />
                  {episode.duration}
                </div>
                <Button
                  size="sm"
                  variant="ghost"
                  className="gap-1 text-xs md:text-sm"
                >
                  پخش
                  <Play className="md:h-4 md:w-4 h-3.5 w-3.5" />
                </Button>
              </CardFooter>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}