import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const CONTRIBUTORS = [
  {
    id: "sarah",
    name: "کار گروهی",
    image: "/block-media/shadcnblocks/block/avatar-1.webp",
    imageAlt: "تقویم تیم",
    title: "نقش و دسترسی",
    description:
      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
  },
  {
    id: "marcus",
    name: "همکاری تیمی",
    image: "/block-media/shadcnblocks/block/avatar-2.webp",
    imageAlt: "فضای همکاری تیمی",
    title: "چک‌لیست تحویل",
    description:
      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
  },
  {
    id: "emily",
    name: "مدیریت پروژه",
    image: "/block-media/shadcnblocks/block/avatar-3.webp",
    imageAlt: "برد مدیریت پروژه",
    title: "گزارش پیشرفت",
    description:
      "بحث را کنار هر تسک نگه دارید تا تصمیم‌ها گم نشود.",
  },
  {
    id: "david",
    name: "هم‌راستایی",
    image: "/block-media/shadcnblocks/block/avatar-4.webp",
    imageAlt: "تقویم تیم",
    title: "برد Kanban",
    description:
      "وضعیت هر کار را در یک نما ببینید و گلوگاه‌ها را زودتر پیدا کنید.",
  },
  {
    id: "luna",
    name: "کار گروهی",
    image: "/block-media/shadcnblocks/block/avatar-3.webp",
    imageAlt: "فضای همکاری تیمی",
    title: "تقویم تیمی",
    description:
      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
  },
  {
    id: "alex",
    name: "همکاری تیمی",
    image: "/block-media/shadcnblocks/block/avatar-6.webp",
    imageAlt: "برد مدیریت پروژه",
    title: "اشتراک فایل",
    description:
      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
  },
] as const;

interface Feature255Props {
  className?: string;
}

const Feature255 = ({ className }: Feature255Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto max-w-4xl">
          <div className="flex items-center justify-between gap-4">
            <p className="text-lg font-medium">اعلان‌های هوشمند فقط اطلاعات ضروری را می‌رسانند و حواس‌پرتی را کم می‌کنند.</p>
            <Button variant="outline">مشاهده همه</Button>
          </div>
          <div className="mt-7">
            <div className="flex flex-col gap-10">
              {CONTRIBUTORS.map((contributor) => (
                <div key={contributor.id}>
                  <div className="flex gap-3 text-start md:gap-4">
                    <img
                      src={contributor.image}
                      alt={contributor.imageAlt}
                      className="size-10 shrink-0 rounded-lg border border-border md:size-12"
                    />
                    <div>
                      <p className="flex flex-col font-medium md:flex-row md:items-center md:gap-1 md:text-lg">
                        {contributor.name}
                        <span className="text-sm whitespace-nowrap text-muted-foreground md:text-base md:font-normal">
                          {contributor.title}
                        </span>
                      </p>
                      <p className="hidden text-pretty text-muted-foreground md:block">
                        {contributor.description}
                      </p>
                    </div>
                  </div>
                  <p className="mt-2 text-sm text-pretty text-muted-foreground md:hidden md:text-base">
                    {contributor.description}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature255 };