"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 [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-center md:text-left text-center">
                    <h1 className="text-5xl font-bold mb-2">
                        Аренда яхт и катеров в Балаклаве
                    </h1>
                    <p className="text-white/90">
                        Насладись морем и Крымом с Travel Marine
                    </p>
                </div>

                {/* Кнопка для мобильных устройств */}
                <div className="md:hidden flex  justify-center">
                    <Button className="bg-brand hover:bg-brand-hover active:bg-brand-active font-bold text-white h-[64px] border-0 px-8 text-lg w-full">
                        Выберите яхту
                    </Button>
                </div>

                {/* Поисковая форма - скрыта на мобильных устройствах */}
                <Card className="bg-white shadow-lg s hidden md:block rounded-full">
                    <CardContent className="p-2">
                        {/* Основные поля поиска */}
                        <div className="flex flex-col md:flex-row gap-4">
                            {/* Локация */}
                            <div className="flex-1">
                                <Button variant="outline" className="w-full h-[64px] px-4 justify-start">
                                    <div className="flex items-center">
                                        <Icon
                                            name="map"
                                            className="w-5 h-5 text-brand mr-3"
                                        />
                                        <span className="font-normal">Балаклава</span>
                                    </div>
                                </Button>
                            </div>

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

                            {/* Количество гостей */}
                            <div className="flex-1">
                                <Select
                                    value={guests}
                                    onValueChange={setGuests}
                                >
                                    <SelectTrigger className="w-full h-[64px] px-4">
                                        <div className="flex items-center">
                                            <Icon
                                                name="people"
                                                className="w-5 h-5 text-brand 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 variant="gradient" className="font-bold text-white h-[64px] w-[176px] px-8">
                                Найти
                            </Button>
                        </div>
                    </CardContent>
                </Card>
            </div>
        </section>
    );
}