import * as React from "react";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Textarea } from "../ui/textarea";
import { SubmitButton } from "../submit-button";
import Link from "next/link";

export function ContactUsForm() {
  const typeMessage = [
    { value: "1", label: "Request to become a user" },
    { value: "2", label: "OTP problem" },
    { value: "3", label: "Request for a feature" },
    { value: "4", label: "Other" },
  ];

  return (
    <Card className="w-[500px] bg-[#171717] border-none text-white">
      <CardHeader>
        <CardTitle className="text-3xl font-bold">Contact Us</CardTitle>
        <CardDescription className="text-gray-400">
          Fill in the form below to contact the admin
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="name" className="text-sm text-gray-300">
              Name
            </Label>
            <Input
              id="name"
              placeholder="John doe"
              className="bg-[#1C1C1C] border-gray-800 text-white placeholder:text-gray-500 focus:border-emerald-600 focus:ring-emerald-600"
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="email" className="text-sm text-gray-300">
              Email
            </Label>
            <Input
              id="email"
              placeholder="example@gmail.com"
              className="bg-[#1C1C1C] border-gray-800 text-white placeholder:text-gray-500 focus:border-emerald-600 focus:ring-emerald-600"
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="phone" className="text-sm text-gray-300">
              Phone
            </Label>
            <Input
              id="phone"
              placeholder="085255xxx"
              className="bg-[#1C1C1C] border-gray-800 text-white placeholder:text-gray-500 focus:border-emerald-600 focus:ring-emerald-600"
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="typemessage" className="text-sm text-gray-300">
              Type message
            </Label>
            <Select>
              <SelectTrigger
                id="typemessage"
                className="bg-[#1C1C1C] border-gray-800 text-white focus:border-emerald-600 focus:ring-emerald-600"
              >
                <SelectValue placeholder="Select" />
              </SelectTrigger>
              <SelectContent className="bg-[#1C1C1C] border-gray-800 text-white">
                {typeMessage.map((message) => (
                  <SelectItem
                    key={message.value}
                    value={message.value}
                    className="focus:bg-emerald-600 focus:text-white"
                  >
                    {message.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-2">
            <Label htmlFor="message" className="text-sm text-gray-300">
              Message
            </Label>
            <Textarea
              id="message"
              name="message"
              placeholder="Your message here..."
              className="resize-none h-24 bg-[#1C1C1C] border-gray-800 text-white placeholder:text-gray-500 focus:border-emerald-600 focus:ring-emerald-600"
              required
            />
          </div>
        </form>
      </CardContent>
      <CardFooter className="flex flex-col items-center space-y-4">
        <SubmitButton className="w-full bg-emerald-600 hover:bg-emerald-700 text-white">
          Send
        </SubmitButton>
        <div className="text-center text-lg space-x-2">
          <span className="text-gray-400">Already have an account?</span>
          <Link href="/sign-in" className="text-white hover:text-emerald-500">
            Login
          </Link>
        </div>
      </CardFooter>
    </Card>
  );
}