parch-cast/components/episode-cards.tsx

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-12 md:py-16 lg:py-20" : ""}`}
    >
      <div className={`${section === "main" ? "container" : ""}`}>
        <div className="flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
          <div>
            <h2
              className={`${
                section === "main"
                  ? "text-4xl font-bold tracking-tight text-parch leading-normal"
                  : "text-2xl font-bold"
              }`}
            >
              آخرین قسمت ها
            </h2>
            <p className="text-muted-foreground">
              از جدیدترین مکالمات ما مطلع شوید
            </p>
          </div>
          <Button variant="link" className="gap-1 pe-0">
            مشاهده همه قسمت ها
          </Button>
        </div>
        <div
          className={`mt-8 grid md:gap-6 gap-4 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"
            >
              <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>
                <CardTitle>{episode.title}</CardTitle>
                <CardDescription>{episode.date}</CardDescription>
              </CardHeader>
              <CardContent>
                <p className="line-clamp-3 text-sm text-muted-foreground">
                  {episode.description}
                </p>
              </CardContent>
              <CardFooter className="flex items-center justify-between">
                <div className="flex items-center text-sm text-muted-foreground">
                  <Clock className="ml-1 h-4 w-4" />
                  {episode.duration}
                </div>
                <Button size="sm" variant="ghost" className="gap-1">
                  پخش
                  <Play className="h-4 w-4" />
                </Button>
              </CardFooter>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}