'use client';

import Link from 'next/link';
import { Eye } from 'lucide-react';

interface LinkData {
    _id: string;
    wtihub_short_id: string;
    wtihub_original_url: string;
    wtihub_clicks: number;
    wtihub_created_at: string;
}

export default function LinkTable({ links }: {links: LinkData[]}) {
    return (
        <div className="mt-12 overflow-x-auto rounded-xl border border-wtihub-border bg-wtihub-surface">
            <table className="w-full text-left border-collapse">
                <thead>
                    <tr className="border-b border-wtihub-border bg-wtihub-bg/50">
                        <th className="p-4 text-sm font-semibold text-wtihub-green">Short Link</th>
                        <th className="p-4 text-sm font-semibold text-wtihub-text">Original Destination</th>
                        <th className="p-4 text-sm font-semibold text-wtihub-text text-center">Clicks</th>
                        <th className="p-4 text-sm font-semibold text-wtihub-text">Date</th>
                        <th className="p-4 text-sm font-semibold text-wtihub-text text-right">Actions</th>
                    </tr>
                </thead>
                <tbody className="divide-y divide-wtihub-border">
                    {links.map((link) => (
                        <tr key={link.wtihub_short_id} className="hover:bg-wtihub-bg/30 transition-colors">
                            <td className="p-4">
                                <span className="text-wtihub-green font-mono font-medium">
                                    {link.wtihub_short_id}
                                </span>
                            </td>
                            <td className="p-4 max-w-xs truncate text-gray-400 text-sm">
                                {link.wtihub_original_url}
                            </td>
                            <td className="p-4 text-center">
                                <span className="bg-wtihub-green/10 text-wtihub-green px-3 py-1 rounded-full text-xs font-bold border border-wtihub-green/20">
                                  {link.wtihub_clicks}
                                </span>
                            </td>
                            <td className="p-4 text-sm text-gray-500">
                                {new Date(link.wtihub_created_at).toLocaleDateString()}
                            </td>
                            <td className="p-4 text-right">
                              <Link href={`/dashboard/link/${link._id}`}>
                                <button className="flex items-center gap-2 ml-auto text-wtihub-text hover:text-wtihub-green text-sm font-medium transition-all">
                                   {<Eye size={16}/>} 
                                   <span>View Details</span>
                                </button>
                              </Link>
                            </td>
                        </tr>
                    ))}
                </tbody>
            </table>

            {links.length === 0 && (
                <div className="p-12 text-center text-gray-500">
                    No streams found. Start by shrinking a link above.
                </div>
            )}
        </div>
    )
}