import { CalendarRange, Cpu, Lock, TrendingUp } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import FeatureCard from '@/pages/investments/components/feature-card';
import type { InvestmentDuration } from '@/pages/investments/types';
import { formatCurrency } from '@/pages/investments/utils';

type InvestmentDetailsCardProps = {
    durations: InvestmentDuration[];
    maxAmount: number;
    minAmount: number;
    monthlyReturn: number;
};

export default function InvestmentDetailsCard({
    durations,
    maxAmount,
    minAmount,
    monthlyReturn,
}: InvestmentDetailsCardProps) {
    const durationMonths = durations
        .map((duration) => duration.months)
        .join(', ');
    const chips = [
        `${monthlyReturn}% mensual`,
        `${durationMonths} meses`,
        `${formatCurrency(minAmount)} min.`,
        `${formatCurrency(maxAmount)} max.`,
    ];

    return (
        <aside className="space-y-5">
            <div className="space-y-1">
                <h2 className="text-lg font-semibold">Detalles del Producto</h2>
                <p className="text-sm text-muted-foreground">
                    Conoce los beneficios de tu inversión
                </p>
            </div>

            <div className="space-y-3">
                <FeatureCard
                    icon={TrendingUp}
                    title="Rendimiento Mensual"
                    description={`${monthlyReturn}% mensual (tasa actual)`}
                    highlighted
                />
                <FeatureCard
                    icon={CalendarRange}
                    title="Flexibilidad"
                    description={`Elige entre ${durationMonths} meses`}
                    highlighted
                />
                <FeatureCard
                    icon={Lock}
                    title="Seguridad"
                    description="Capital protegido"
                />
                <FeatureCard
                    icon={Cpu}
                    title="Automático"
                    description="Ganancias calculadas automáticamente"
                />
            </div>

            <div className="space-y-2.5">
                <h3 className="font-semibold">Características del plan</h3>
                <div className="flex flex-wrap gap-2">
                    {chips.map((chip) => (
                        <span
                            key={chip}
                            className="rounded-full border border-primary/30 bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary"
                        >
                            {chip}
                        </span>
                    ))}
                </div>
                <ul className="space-y-1.5 text-sm text-muted-foreground">
                    <li>Liquidación: Al final del período</li>
                    <li>Seguimiento: Dashboard en tiempo real</li>
                    <li>Tasa variable según configuración mensual</li>
                </ul>
            </div>

            <div className="flex gap-3 rounded-lg border border-primary/40 bg-primary/10 p-4">
                <Badge className="h-fit shrink-0 self-center bg-primary px-2.5 py-1.5 text-xs text-primary-foreground">
                    Nuevo
                </Badge>
                <div className="min-w-0">
                    <p className="font-semibold">Sistema automatizado</p>
                    <p className="mt-1 text-sm leading-relaxed text-muted-foreground">
                        Tus ganancias se calculan y actualizan automáticamente
                        cada mes.
                    </p>
                </div>
            </div>
        </aside>
    );
}