"use client";
import React from "react";


import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import CardShotDetails from "./CardShortDetail";
import CreditCardApplyForm from "./CreditCardApplyForm";

interface Feature {
  id: number;
  details: string;
}
interface Offer {
  id: number;
  details: string;
}

interface CreditCard {
  id: number;
  name: string;
  bankname: string;
  minSalary: number;
  annualFee: string;
  image: string;
  features: Feature[];
  offers: Offer[];
}

interface Props {
  card: CreditCard;
  open: boolean;
  onClose: () => void;
}

const CreditCardApplyModal: React.FC<Props> = ({ card, open, onClose }) => {
  return (
    <Dialog open={open} onOpenChange={onClose}>
  <DialogContent
  className="max-w-4xl w-full sm:max-h-none sm:overflow-y-visible max-h-[90vh] overflow-y-auto sm:rounded-xl rounded-none"
>
  <DialogHeader>
   <DialogTitle className="text-base sm:text-xl">
  Apply for {card.name}
</DialogTitle>
  </DialogHeader>

  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
    <CardShotDetails card={card} />
    <CreditCardApplyForm
      cardId={card.id}
      cardName={card.name}
      onSuccess={onClose}
    />
  </div>
</DialogContent>
    </Dialog>
  );
};

export default CreditCardApplyModal;