"use client";
import { useTranslations } from "next-intl";
import { CheckoutFormValues } from "@/interfaces/types";
import { UseFormReturn } from "react-hook-form";
import FormInput from "@/shared/form-controls/FormInput";

export default function PaymentForm() {
  const t = useTranslations("");

  return (
    <div className="border border-gray-200 rounded-2xl shadow-md shadow-black/10 p-6">
      <div className="flex items-center gap-2 mb-6">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          className="lucide lucide-credit-card *:stroke-primary"
        >
          <rect width="20" height="14" x="2" y="5" rx="2"></rect>
          <line x1="2" x2="22" y1="10" y2="10"></line>
        </svg>
        <h3 className="text-xl">{t("Text.payment_info")}</h3>
      </div>
      <div className="space-y-4">
        <FormInput
          name="card_number"
          label="card_number"
          placeholder="card_number"
        />
        <FormInput name="card_name" label="card_name" placeholder="card_name" />
        <div className="grid grid-cols-2 gap-4">
          <FormInput
            name="expiry_date"
            label="expiry_date"
            placeholder="expiry_date"
          />
          <FormInput name="cvv" label="cvv" placeholder="cvv" />
        </div>
        <div className="flex items-center gap-2 p-4 bg-gray-50 rounded-lg">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="lucide lucide-credit-card *:stroke-primary"
          >
            <rect width="20" height="14" x="2" y="5" rx="2"></rect>
            <line x1="2" x2="22" y1="10" y2="10"></line>
          </svg>
          <span className="text-sm text-text-secondary">{t("Text.payment_secure")}</span>
        </div>
      </div>
    </div>
  );
}