import { PawPrint, ExternalLink } from 'lucide-react';

export const HistoryView = ({ onBack }: { onBack: () => void }) => (
    <div className="max-w-4xl mx-auto px-4 py-6 sm:p-6 sm:pt-10">
        {/* Przycisk powrotu - mniejszy margines na mobile */}
        <button
            onClick={onBack}
            className="mb-6 sm:mb-8 flex items-center gap-2 text-pink-500 font-bold hover:scale-105 transition-transform text-sm sm:text-base"
        >
            <PawPrint size={18} /> Back to KittyURL
        </button>

        <div className="bg-white/80 backdrop-blur-md rounded-[2rem] sm:rounded-[2.5rem] p-5 sm:p-8 shadow-xl border-2 border-pink-50">
            <h2 className="text-2xl sm:text-3xl font-black text-slate-800 mb-6 sm:mb-8 flex items-center gap-2">
                Recent Paws <span className="text-xl sm:text-2xl">🐾</span>
            </h2>

            <div className="overflow-hidden rounded-2xl border border-pink-100">
                {/* Widok Tabeli (widoczny od ekranów 'sm') */}
                <table className="w-full text-left bg-white hidden sm:table">
                    <thead className="bg-pink-50 text-pink-600">
                        <tr>
                            <th className="px-6 py-4 font-bold uppercase text-xs">Long URL</th>
                            <th className="px-6 py-4 font-bold uppercase text-xs">Kitty URL</th>
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-pink-50">
                        <tr className="hover:bg-pink-50/50 transition-colors">
                            <td className="px-6 py-4 text-slate-400 truncate max-w-[300px]">
                                https://very-long-link.com/cats/are/the/best/animals/in/the/world
                            </td>
                            <td className="px-6 py-4">
                                <a href="#" className="font-bold text-pink-500 flex items-center gap-2 hover:underline">
                                    kitty.url/meow <ExternalLink size={14} />
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>

                {/* Widok Mobilny (Lista kart zamiast tabeli - widoczny tylko na małych ekranach) */}
                <div className="sm:hidden divide-y divide-pink-50 bg-white">
                    <div className="p-4 space-y-2">
                        <div className="text-[10px] font-bold text-pink-400 uppercase tracking-wider">Long URL</div>
                        <div className="text-slate-500 text-sm truncate">
                            https://very-long-link.com/cats/are/the/best/animals/in/the/world
                        </div>
                        <div className="pt-2">
                            <div className="text-[10px] font-bold text-pink-400 uppercase tracking-wider mb-1">Kitty URL</div>
                            <a href="#" className="font-bold text-pink-500 flex items-center gap-1 text-sm">
                                kitty.url/meow <ExternalLink size={14} />
                            </a>
                        </div>
                    </div>
                    {/* Tutaj możesz mapować kolejne wpisy historii tak samo jak wyżej */}
                </div>
            </div>
        </div>
    </div>
);