const { FileText, Download } = lucide;

const DownloadButton = ({ href, label, subtext }) => (
    <a
        href={href}
        target="_blank"
        rel="noopener noreferrer"
        className="flex items-center gap-4 p-4 bg-white border border-slate-200 rounded-xl hover:shadow-md hover:border-brand-primary transition-all group"
    >
        <div className="w-10 h-10 bg-slate-50 rounded-lg flex items-center justify-center text-slate-400 group-hover:text-brand-primary group-hover:bg-blue-50 transition-colors">
            <FileText size={20} />
        </div>
        <div className="flex-1">
            <div className="font-bold text-slate-700 group-hover:text-brand-primary transition-colors">{label}</div>
            {subtext && <div className="text-xs text-slate-400">{subtext}</div>}
        </div>
        <Download size={16} className="text-slate-300 group-hover:text-brand-primary" />
    </a>
);

window.App.Components.DownloadButton = DownloadButton;