"use client";

import Image from "next/image";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select";
import { useState } from "react";
import { DatePicker } from "@/components/ui/date-picker";
import Icon from "@/components/ui/icon";

export default function Hero() {
    const [location, setLocation] = useState("");
    const [guests, setGuests] = useState("");

    return (
        <section className="relative h-[600px] rounded-[24px] mx-[16px] overflow-hidden flex text-white">
            <Image
                src="/images/hero-bg.jpg"
                alt="Море"
                fill
                className="object-cover"
                priority
            />
            <div className="absolute inset-0 bg-black/40" />

            <div className="relative z-10 w-full max-w-6xl mx-auto px-4 flex flex-col justify-between h-full py-8 pt-24">
                {/* Заголовок и подзаголовок */}
                <div className="text-left">
                    <h1 className="text-5xl font-bold mb-2">Аренда яхт</h1>
                    <h2 className="text-5xl font-bold mb-4">в Балаклаве</h2>
                    <p className="text-ь text-white/90">
                        Подключись к морскому бризу вместе с Travel Marine
                    </p>
                </div>

                {/* Поисковая форма */}
                <Card className="bg-white shadow-lg s">
                    <CardContent className="p-6">
                        {/* Основные поля поиска */}
                        <div className="flex flex-col md:flex-row gap-4 mb-4">
                            {/* Локация */}
                            <div className="flex-1">
                                <Select
                                    value={location}
                                    onValueChange={setLocation}
                                >
                                    <SelectTrigger className="w-full h-12 px-4">
                                        <div className="flex items-center">
                                            <Icon
                                                name="map"
                                                className="w-5 h-5 text-teal-600 mr-3"
                                            />
                                            <SelectValue placeholder="Выберите локацию" />
                                        </div>
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="balaklava">
                                            Балаклава
                                        </SelectItem>
                                        <SelectItem value="sevastopol">
                                            Севастополь
                                        </SelectItem>
                                        <SelectItem value="yalta">
                                            Ялта
                                        </SelectItem>
                                        <SelectItem value="sudak">
                                            Судак
                                        </SelectItem>
                                        <SelectItem value="kerch">
                                            Керчь
                                        </SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>

                            {/* Дата и время */}
                            <div className="flex-1">
                                <DatePicker />
                            </div>

                            {/* Количество гостей */}
                            <div className="flex-1">
                                <Select
                                    value={guests}
                                    onValueChange={setGuests}
                                >
                                    <SelectTrigger className="w-full h-12 px-4">
                                        <div className="flex items-center">
                                            <Icon
                                                name="people"
                                                className="w-5 h-5 text-teal-600 mr-3"
                                            />
                                            <SelectValue placeholder="Сколько гостей?" />
                                        </div>
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="1">
                                            1 гость
                                        </SelectItem>
                                        <SelectItem value="2">
                                            2 гостя
                                        </SelectItem>
                                        <SelectItem value="3">
                                            3 гостя
                                        </SelectItem>
                                        <SelectItem value="4">
                                            4 гостя
                                        </SelectItem>
                                        <SelectItem value="5">
                                            5 гостей
                                        </SelectItem>
                                        <SelectItem value="6">
                                            6 гостей
                                        </SelectItem>
                                        <SelectItem value="7">
                                            7 гостей
                                        </SelectItem>
                                        <SelectItem value="8">
                                            8 гостей
                                        </SelectItem>
                                        <SelectItem value="9">
                                            9 гостей
                                        </SelectItem>
                                        <SelectItem value="10">
                                            10+ гостей
                                        </SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>

                            {/* Кнопка поиска */}
                            <Button className="bg-teal-600 hover:bg-teal-700 text-white h-12 px-8">
                                Найти
                            </Button>
                        </div>

                        {/* Фильтры */}
                        <div className="flex flex-wrap gap-2">
                            <Button variant="outline" className="h-10">
                                <Icon
                                    name="money"
                                    className="w-4 h-4 text-teal-600 mr-2"
                                />
                                Бюджетные
                            </Button>
                            <Button variant="outline" className="h-10">
                                <Icon
                                    name="money"
                                    className="w-4 h-4 text-teal-600 mr-2"
                                />
                                Ближайшие
                            </Button>
                            <Button variant="outline" className="h-10">
                                <Icon
                                    name="money"
                                    className="w-4 h-4 text-teal-600 mr-2"
                                />
                            </Button>
                            <Button variant="outline" className="h-10">
                                <Icon
                                    name="money"
                                    className="w-4 h-4 text-teal-600 mr-2"
                                />
                            </Button>
                        </div>
                    </CardContent>
                </Card>
            </div>
        </section>
    );
}
