import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { ArrowLeft, ChevronDown } from "lucide-react";
import Link from "next/link";

export default function Page({ params }: { params: { app: string } }) {
  const { app } = params;

  return (
    <div className="space-y-4">
      <div className="mb-2 flex items-center gap-3">
        <Link href={`/${app}/tickets`} className="rounded bg-white p-2 text-[#383E49]">
          <ArrowLeft className="size-4" />
        </Link>
        <h1 className="text-[28px] font-semibold leading-none text-[#272833]">Support Tickets</h1>
      </div>

      <Card className="border-[#EBEEF2]">
        <CardContent className="space-y-5 p-4">
          <div>
            <h3 className="text-[34px] font-semibold text-[#272833]">Create Quick Ticket</h3>
            <p className="text-[16px] text-[#8B8D97]">Write and address new quries and issues</p>
          </div>

          <div className="grid gap-4 md:grid-cols-3">
            <button className="flex h-10 w-full items-center justify-between rounded-md border border-[#EEF1F4] bg-[#F8F9FC] px-3 text-[12px] text-[#7A8490]">
              abc@gmail.com <ChevronDown className="size-4" />
            </button>
            <button className="flex h-10 w-full items-center justify-between rounded-md border border-[#EEF1F4] bg-[#F8F9FC] px-3 text-[12px] text-[#7A8490]">
              Choose Type <ChevronDown className="size-4" />
            </button>
            <button className="flex h-10 w-full items-center justify-between rounded-md border border-[#EEF1F4] bg-[#F8F9FC] px-3 text-[12px] text-[#7A8490]">
              Choos type <ChevronDown className="size-4" />
            </button>
          </div>

          <div>
            <p className="mb-2 text-[12px] text-[#545D69]">Ticket Body</p>
            <textarea
              rows={5}
              placeholder="Type Ticket Issue Here...."
              className="w-full rounded-md border border-[#EEF1F4] bg-[#F8F9FC] p-3 text-[13px] text-[#272833] outline-none"
            />
          </div>

          <div className="flex justify-end">
            <Button className="h-10 rounded bg-[#074473] px-8 text-[12px] font-semibold text-white">Send Ticket</Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}