reui-blocks/blocks/industries4.tsx

"use client";

import { AnimatePresence, motion } from "framer-motion";
import { CornerDownRight } from "lucide-react";
import { useState } from "react";

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

interface Contractor {
  id: string;
  category: string;
  title: string;
  imageSrc: string;
  imageAlt: string;
  learnMoreUrl: string;
}

interface Industries4Props {
  heading: string;
  contractors: Contractor[];
  className?: string;
}

const Industries4 = ({
  className,
  heading = "توانمندسازی صنایع انرژی تجدیدپذیر",
  contractors = [
    {
      id: "mining-enterprises",
      category: "برقابی",
      title:
        "تحول در تولید برقابی با مدیریت هوشمند سدها",
      imageSrc:
        "/block-media/shadcnblocks/block/industry/hydro.jpg",
      imageAlt: "محل بهره‌برداری نیروگاه برقابی",
      learnMoreUrl: "#",
    },
    {
      id: "global-finance",
      category: "بادی",
      title:
        "بیشینه‌سازی بهره‌وری مزرعه‌های بادی با بهینه‌سازی توربین مبتنی بر هوش مصنوعی",
      imageSrc:
        "/block-media/shadcnblocks/block/industry/wind.jpg",
      imageAlt: "تولید انرژی بادی",
      learnMoreUrl: "#",
    },
    {
      id: "elite-fashion",
      category: "خورشیدی",
      title:
        "گسترش زیرساخت خورشیدی با یکپارچه‌سازی پیشرفته شبکه فتوولتائیک",
      imageSrc:
        "/block-media/shadcnblocks/block/industry/solar.jpg",
      imageAlt: "تولید انرژی خورشیدی",
      learnMoreUrl: "#",
    },
  ],
}: Industries4Props) => {
  const [activeContractor, setActiveContractor] = useState(
    contractors[0]?.id || "",
  );

  const handleContractorHover = (contractorId: string) => {
    setActiveContractor(contractorId);
  };

  return (
    <section dir="rtl" lang="fa" className={cn("py-16 md:py-24", className)}>
      <div className="container">
        {/* Heading */}
        <div className="mb-12 text-start">
          <h2 className="text-xl md:text-2xll lg:text-2xll">{heading}</h2>
        </div>

        {/* Mobile Contractor Showcase */}
        <div className="space-y-6 lg:hidden">
          {contractors.map((contractor) => (
            <a
              key={contractor.id}
              href={contractor.learnMoreUrl}
              className="block overflow-hidden rounded-lg border border-border"
            >
              {/* Image */}
              <div className="relative aspect-video w-full">
                <img
                  src={contractor.imageSrc}
                  alt={contractor.imageAlt}
                  className="h-full w-full object-cover"
                />
              </div>

              {/* Content */}
              <div className="space-y-4 p-6 text-start">
                <div className="flex items-center">
                  <span className="text-xl font-semibold">
                    {contractor.category}
                  </span>
                </div>
                <h3 className="text-lg leading-tight text-muted-foreground">
                  {contractor.title}
                </h3>
                <Button
                  variant="ghost"
                  size="sm"
                  className="p-0 text-sm font-medium text-primary hover:text-primary/80"
                  asChild
                >
                  <a href={contractor.learnMoreUrl}>
                    <CornerDownRight className="ms-1 h-3 w-3 rtl:-scale-x-100" />
                    بیشتر بدانید
                  </a>
                </Button>
              </div>
            </a>
          ))}
        </div>

        {/* Desktop Contractor Showcase */}
        <div className="hidden h-128 overflow-hidden border border-border lg:flex">
          {contractors.map((contractor) => (
            <a
              key={contractor.id}
              href={contractor.learnMoreUrl}
              className={`flex h-full cursor-pointer gap-6 overflow-hidden border-s border-border first:border-s-0 ${
                activeContractor === contractor.id ? "flex-1" : "w-48"
              }`}
              onMouseEnter={() => handleContractorHover(contractor.id)}
            >
              <div className="flex h-full min-w-0 flex-col justify-between gap-8 p-6 text-start">
                {/* Logo */}
                <div className="flex h-14 w-32 items-center">
                  <span className="text-xl font-semibold">
                    {contractor.category}
                  </span>
                </div>

                <div className="flex flex-col justify-between gap-8">
                  {/* Expanded Content  */}
                  <AnimatePresence>
                    {activeContractor === contractor.id && (
                      <motion.div
                        key={`content-${contractor.id}`}
                        className="space-y-4"
                      >
                        <h3 className="text-lg leading-tight text-muted-foreground">
                          {contractor.title}
                        </h3>
                        <Button
                          variant="ghost"
                          size="sm"
                          className="p-0 text-sm font-medium text-primary hover:text-primary/80"
                          asChild
                        >
                          <a href={contractor.learnMoreUrl}>
                            <CornerDownRight className="ms-1 h-3 w-3 rtl:-scale-x-100" />
                            بیشتر بدانید
                          </a>
                        </Button>
                      </motion.div>
                    )}
                  </AnimatePresence>
                </div>
              </div>

              {/* Image  */}
              <AnimatePresence>
                {activeContractor === contractor.id && (
                  <motion.div
                    key={contractor.id}
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    exit={{ opacity: 0, x: -20 }}
                    transition={{ duration: 0.4, ease: "easeOut" }}
                    className={`relative h-full min-w-0 ${
                      contractor.id === contractors[0]?.id
                        ? "w-96 flex-shrink-0"
                        : "flex-1"
                    }`}
                  >
                    <img
                      src={contractor.imageSrc}
                      alt={contractor.imageAlt}
                      className="h-full w-full object-cover"
                    />
                  </motion.div>
                )}
              </AnimatePresence>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Industries4 };