reui-blocks/blocks/contact23.tsx

"use client";

import { ChevronLeft, Clock, MapPin, Phone } from "lucide-react";
import { useState } from "react";

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

interface StoreLocation {
  id: string;
  name: string;
  address: string;
  city: string;
  phone: string;
  hours: string;
  distance?: string;
  mapQuery: string;
}

interface Contact23Props {
  title?: string;
  description?: string;
  locations?: StoreLocation[];
  defaultMapQuery?: string;
  className?: string;
}

const Contact23 = ({
  title = "یافتن نزدیک‌ترین شعبه",
  description = "نام شهر یا کد پستی را وارد کنید تا نزدیک‌ترین شعبه یا نمایندگی را پیدا کنید.",
  locations = [
    {
      id: "1",
      name: "شعبه مرکزی",
      address: "Valiasr St, District 6",
      city: "Tehran, Iran",
      phone: "۲۱-۱۲۳۴۵۶۷۸",
      hours: "شنبه تا پنج‌شنبه ۱۰ تا ۲۱، جمعه ۱۱ تا ۱۸",
      distance: "۱۳ کیلومتر",
      mapQuery: "Valiasr Street, Tehran, Iran",
    },
    {
      id: "2",
      name: "شعبه ونک",
      address: "Vanak Square, District 3",
      city: "Tehran, Iran",
      phone: "۲۱-۸۸۷۷۶۶۵۵",
      hours: "شنبه تا پنج‌شنبه ۱۰ تا ۲۰، جمعه ۱۲ تا ۱۸",
      distance: "۲ کیلومتر",
      mapQuery: "Vanak Square, Tehran, Iran",
    },
    {
      id: "3",
      name: "شعبه سعادت‌آباد",
      address: "Seyyed Khandan St",
      city: "Tehran, Iran",
      phone: "۲۱-۴۴۰۱۱۲۲",
      hours: "شنبه تا پنج‌شنبه ۹ تا ۱۹، جمعه ۱۰ تا ۱۷",
      distance: "۴.۲ کیلومتر",
      mapQuery: "Saadat Abad, Tehran, Iran",
    },
    {
      id: "4",
      name: "شعبه تجریش",
      address: "Tajrish Square",
      city: "Tehran, Iran",
      phone: "۲۱-۲۲۷۷۸۸۹۹",
      hours: "شنبه تا پنج‌شنبه ۸ تا ۲۰، جمعه ۹ تا ۱۸",
      distance: "۵.۱ کیلومتر",
      mapQuery: "Tajrish, Tehran, Iran",
    },
  ],
  defaultMapQuery = "تهران، ایران",
  className,
}: Contact23Props) => {
  const [selectedLocation, setSelectedLocation] =
    useState<StoreLocation | null>(null);
  const mapQuery = selectedLocation?.mapQuery || defaultMapQuery;

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto max-w-6xl">
          <div className="mb-10">
            <h1 className="mb-4 text-xl font-medium tracking-tight md:text-2xll">
              {title}
            </h1>
            <p className="text-muted-foreground">{description}</p>
          </div>

          <div className="mb-8 flex max-w-md gap-3">
            <Input
              placeholder="نام شهر یا کد پستی"
              className="bg-background"
            />
            <Button>جستجو</Button>
          </div>

          <div className="grid gap-8 lg:grid-cols-5">
            <div className="lg:col-span-2">
              <div className="space-y-4">
                {locations.map((location) => (
                  <div
                    key={location.id}
                    onClick={() => setSelectedLocation(location)}
                    className={cn(
                      "group cursor-pointer rounded-xl border bg-background p-5 transition-colors hover:border-primary/50 hover:bg-muted/30",
                      selectedLocation?.id === location.id &&
                        "border-primary bg-muted/30",
                    )}
                  >
                    <div className="mb-3 flex items-start justify-between">
                      <div>
                        <h3 className="font-medium">{location.name}</h3>
                        {location.distance && (
                          <span className="text-sm text-muted-foreground">
                            {location.distance}
                          </span>
                        )}
                      </div>
                      <ChevronLeft className="size-5 text-muted-foreground transition-transform group-hover:-translate-x-1" />
                    </div>

                    <div className="space-y-2 text-sm">
                      <div className="flex items-start gap-2.5">
                        <MapPin className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
                        <div dir="rtl" className="text-start">
                          <p>{location.address}</p>
                          <p className="text-muted-foreground">
                            {location.city}
                          </p>
                        </div>
                      </div>
                      <div className="flex items-center gap-2.5">
                        <Phone className="size-4 shrink-0 text-muted-foreground" />
                        <a
                          href={`tel:${location.phone}`}
                          className="hover:underline"
                          dir="rtl"
                        >
                          {location.phone}
                        </a>
                      </div>
                      <div className="flex items-start gap-2.5">
                        <Clock className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
                        <span className="text-muted-foreground">
                          {location.hours}
                        </span>
                      </div>
                    </div>

                    <div className="mt-4 flex gap-2">
                      <Button variant="outline" size="sm" className="flex-1">
                        مسیریابی
                      </Button>
                      <Button
                        variant="outline"
                        size="sm"
                        className="flex-1"
                        asChild
                      >
                        <a href={`tel:${location.phone}`}>تماس با شعبه</a>
                      </Button>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div className="lg:col-span-3">
              <div className="sticky top-8 overflow-hidden rounded-xl">
                <iframe
                  title="نقشه موقعیت فروشگاه‌ها"
                  src={`https://www.google.com/maps?q=${encodeURIComponent(mapQuery)}&output=embed`}
                  className="aspect-[4/3] w-full border-0 lg:aspect-auto lg:h-[600px]"
                  loading="lazy"
                  referrerPolicy="no-referrer-when-downgrade"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Contact23 };