import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

interface CreditCardProps {
  bank: string;
  minSalary: number;
  annualFee: string;
  offers: string[];
  features: string[];
  image: string;
}

export default function CreditCard({ bank, minSalary, annualFee, offers, features, image }: CreditCardProps) {
  return (
    <Card className="w-full p-4 shadow-lg rounded-lg">
      <CardHeader className="flex items-center space-x-4">
        <img src={image} alt={bank} className="w-20 h-14 rounded-md" />
        <div>
          <h3 className="text-lg font-semibold">{bank}</h3>
          <p className="text-sm text-gray-500">Minimum Salary: AED {minSalary}</p>
          <p className="text-sm text-gray-500">Annual Fee: {annualFee}</p>
        </div>
      </CardHeader>
      <CardContent>
        <ul className="text-sm text-green-600 space-y-1">
          {offers.map((offer, index) => (
            <li key={index}>✅ {offer}</li>
          ))}
        </ul>
        <div className="mt-2 flex flex-wrap gap-2">
          {features.map((feature, index) => (
            <span key={index} className="px-2 py-1 bg-blue-100 text-blue-700 rounded-md text-xs">
              {feature}
            </span>
          ))}
        </div>
        <div className="mt-4 flex space-x-2">
          <Button className="bg-red-600 text-white px-4 py-2">Apply Now</Button>
          <Button variant="outline">View Offers</Button>
        </div>
      </CardContent>
    </Card>
  );
}