You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
119 lines
6.0 KiB
119 lines
6.0 KiB
|
|
import React, { useState } from 'react';
|
|
import { InsuranceQuote } from '../types';
|
|
|
|
interface QuoteCardProps {
|
|
quote: InsuranceQuote;
|
|
onBuy?: () => void;
|
|
}
|
|
|
|
const QuoteCard: React.FC<QuoteCardProps> = ({ quote, onBuy }) => {
|
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
|
|
// Specific features to highlight on the front line
|
|
const highlightFeatures = quote.features.filter(f =>
|
|
['PERSONAL_ACCIDENT_COVER', 'ROAD_SIDE_ASSISTANCE', 'ZERO_DEPRECIATION', 'ENGINE_COVER', 'Tax'].includes(f.label)
|
|
).slice(0, 4); // Keep only one line worth of features
|
|
|
|
return (
|
|
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow overflow-hidden mb-4">
|
|
{/* Top Row: Insurer & Pricing */}
|
|
<div className="p-5 flex flex-col md:flex-row items-center gap-6">
|
|
{/* Insurer Logo & Name */}
|
|
<div className="flex items-center gap-4 w-full md:w-1/3">
|
|
<div className="w-14 h-14 bg-white rounded-lg p-1 flex items-center justify-center border border-slate-100 flex-shrink-0">
|
|
<img src={quote.insurerLogo} alt={quote.insurerName} className="max-h-full max-w-full object-contain" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-[#1a2b4b] font-bold text-sm leading-tight line-clamp-2">{quote.insurerName}</h3>
|
|
<div className="flex items-center gap-2 mt-1">
|
|
<span className="bg-emerald-50 text-emerald-600 text-[9px] font-black px-1.5 py-0.5 rounded uppercase border border-emerald-100">Quick Approval</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* IDV Value Display */}
|
|
<div className="flex-1 flex items-center justify-center md:border-x border-slate-100">
|
|
<div className="text-center md:px-4">
|
|
<p className="text-[10px] text-slate-400 uppercase font-black tracking-widest mb-0.5">IDV Value</p>
|
|
<p className="text-sm font-bold text-[#1a2b4b]">₹ {quote.idvValue.toLocaleString()}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Action & Price */}
|
|
<div className="flex items-center gap-4 w-full md:w-auto justify-between md:justify-end">
|
|
<div className="text-right">
|
|
<p className="text-[10px] text-slate-400 font-bold line-through">₹ {(quote.premium + 150).toLocaleString()}</p>
|
|
<p className="text-2xl font-black text-[#1a2b4b] leading-none">
|
|
<span className="text-xs font-bold mr-0.5">₹</span>
|
|
{quote.premium.toLocaleString()}
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={onBuy}
|
|
className="bg-[#2b458c] hover:bg-[#1a2b4b] text-white px-8 py-3 rounded-xl font-black text-sm transition-all shadow-lg shadow-[#2b458c]/10"
|
|
>
|
|
BUY NOW
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* NEW SECTION: Key features in one line below Buy Now */}
|
|
<div className="px-5 pb-4">
|
|
<div className="flex flex-wrap gap-4 items-center">
|
|
<span className="text-[9px] font-black text-slate-400 uppercase tracking-widest mr-2">Key Benefits:</span>
|
|
{highlightFeatures.map((f, i) => (
|
|
<div key={i} className="flex items-center gap-1.5">
|
|
<svg className="w-3 h-3 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7" /></svg>
|
|
<span className="text-[10px] text-[#1a2b4b] font-bold">
|
|
{f.label.replace(/_/g, ' ')}: <span className="text-slate-500 font-black">{typeof f.value === 'number' && f.value > 1000 ? `₹${(f.value/100000).toFixed(1)}L` : f.value}</span>
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Expand/Collapse Toggle Bar */}
|
|
<button
|
|
onClick={() => setIsExpanded(!isExpanded)}
|
|
className="w-full py-2 bg-slate-50/50 border-t border-slate-50 flex items-center justify-center gap-2 hover:bg-slate-50 transition-colors"
|
|
>
|
|
<span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">
|
|
{isExpanded ? 'Hide Details' : 'View All Policy Features'}
|
|
</span>
|
|
<svg
|
|
className={`w-3 h-3 text-slate-400 transition-transform duration-300 ${isExpanded ? 'rotate-180' : ''}`}
|
|
fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
|
|
{/* Expanded Content */}
|
|
{isExpanded && (
|
|
<div className="p-6 bg-white border-t border-slate-100 animate-in fade-in slide-in-from-top-2 duration-300">
|
|
<h4 className="text-[#1a2b4b] text-[10px] font-black uppercase tracking-[0.2em] mb-4 opacity-50">Detailed Coverage & Breakdown</h4>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-2">
|
|
{quote.features.map((feature, idx) => (
|
|
<div key={idx} className="flex items-center justify-between gap-2 text-[10px] py-1 border-b border-slate-50 last:border-0">
|
|
<div className="flex items-center gap-2 overflow-hidden">
|
|
<svg className="w-3 h-3 text-emerald-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
<span className="text-slate-500 font-bold uppercase tracking-tight truncate">{feature.label.replace(/_/g, ' ')}</span>
|
|
</div>
|
|
<span className="text-[#1a2b4b] font-black flex-shrink-0">
|
|
{feature.value === true || feature.value === 'True' || feature.value === 'Included' || feature.value === 'Yes' ? 'Yes' :
|
|
feature.value === false || feature.value === 'False' || feature.value === 'No' ? 'No' :
|
|
feature.value}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default QuoteCard;
|