import SectionTitle from '../common/sectionTitle';
import AreaSlides from './areaSlides';
import { ArrowUpLeft } from 'lucide-react';
import { Button } from '../ui/button';
import Link from 'next/link';
import { Area } from '@/types/area';

interface AreasSectionProps {
  areas: Area[];
}

export function AreasSection({ areas }: AreasSectionProps) {
  return (
    <>
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 lg:px-20 md:px-10 px-5 pt-10 bg-[#F1F5F9]">


        <div className="flex flex-col gap-3 text-right">
          <h2 className="lg:text-4xl md:text-3xl text-2xl font-bold text-primary">
            المناطق الأكثر طلباً في المملكة
          </h2>
          <p className="text-muted-foreground">
            ابحث عن عقاراتك في المناطق الأكثر طلبًا
          </p>
        </div>


        <div className="w-full md:w-auto flex justify-end order-1 md:order-2">
          <Link href={"/search?q=جميع المدن"} className="pt-3 md:pt-0">
            <Button className="bg-primary-muted text-primary text-xs md:text-base hover:text-white rounded-full self-end">
              مشاهدة جميع مناطق الممكلة
              <ArrowUpLeft />
            </Button>
          </Link>
        </div>

      </div>

      <AreaSlides areas={areas} />
    </>
  );
}