import { Search } from "lucide-react";
import React from "react";

import { Button } from "@/components/ui/button/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu/dropdown-menu";
import { Input } from "@/components/ui/input/input";
import LIcon from "@/components/ui/lucid-icon/lucid-icon";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs/tabs";
import TriggerButton from "@/components/ui/trigger-button/trigger-button";
import ProfileReservation from "@/components/widget/profile/profile-reservations/profile-reservations";
import ProfileReservationsEmpty from "@/components/widget/profile/profile-reservations/profile-reservations-empty";

const ProfileReservations = () => {
  return (
    <div className="rounded-lg border border-gray-200 p-6">
      <h1 className="mb-6 text-2xl font-semibold text-gray-800">
        Rezervasyonlarım
      </h1>
      <div className="flex justify-between">
        <Input label="Rezervasyon arayın" leftIcon={<Search />} size="md" />
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <TriggerButton
              size="md"
              label="Otel"
              rightIcon={<LIcon size={24} name="ChevronDown" />}
            />
          </DropdownMenuTrigger>
          <DropdownMenuContent>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <span>Otel</span>
              </DropdownMenuItem>
              <DropdownMenuItem>
                <span>Uçak</span>
              </DropdownMenuItem>
              <DropdownMenuItem>
                <span>Transfer</span>
              </DropdownMenuItem>
            </DropdownMenuGroup>
          </DropdownMenuContent>
        </DropdownMenu>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <TriggerButton
              size="md"
              label="Yaklaşan Rez."
              rightIcon={<LIcon size={24} name="ChevronDown" />}
            />
          </DropdownMenuTrigger>
          <DropdownMenuContent className="w-56">
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <span>Tümü</span>
              </DropdownMenuItem>
              <DropdownMenuItem>
                <span>Yaklaşan Rezervasyon</span>
              </DropdownMenuItem>
              <DropdownMenuItem>
                <span>Geçmiş Rezervasyon</span>
              </DropdownMenuItem>
              <DropdownMenuItem>
                <span>Transfer</span>
              </DropdownMenuItem>
            </DropdownMenuGroup>
          </DropdownMenuContent>
        </DropdownMenu>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="outline" size="lg">
              <LIcon className="text-gray-500" name="MoveDown" size={24} />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent className="w-56">
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <span>Yeniden eskiye</span>
              </DropdownMenuItem>
              <DropdownMenuItem>
                <span>Eskiden yeniye</span>
              </DropdownMenuItem>
            </DropdownMenuGroup>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
      <Tabs defaultValue="1" className="mt-6">
        <TabsList>
          <TabsTrigger value="1" className="px-16 py-3">
            Yaklaşan
          </TabsTrigger>
          <TabsTrigger value="2" className="px-16 py-3">
            Geçmiş
          </TabsTrigger>
        </TabsList>
        <TabsContent value="1">
          <ProfileReservationsEmpty />
        </TabsContent>
        <TabsContent value="2">
          <ProfileReservation />
        </TabsContent>
      </Tabs>
    </div>
  );
};

export default ProfileReservations;