import React from 'react';

export default function CampaignList({ campaigns, loading, error, onCreate, onEdit, onDelete, onRefresh }) {
    if (loading) return <div>Loading campaigns...</div>;
    if (error) return <div className="text-red-500">{error}</div>;

    return (
        <div className="space-y-6">
            <div className="flex items-center justify-between">
                <div>
                    <h2 className="text-2xl font-bold text-slate-900">Campaigns</h2>
                    <p className="text-slate-500 text-sm mt-1">Broadcast emails to your audience lists</p>
                </div>
                <div className="flex gap-4">
                    <button onClick={onRefresh} className="px-4 py-2 border border-slate-300 text-slate-700 font-medium rounded-lg hover:bg-slate-50 transition-colors text-sm">
                        Refresh
                    </button>
                    <button onClick={onCreate} className="px-4 py-2 bg-indigo-600 text-white font-semibold rounded-lg hover:bg-indigo-700 transition-colors text-sm">
                        New Campaign
                    </button>
                </div>
            </div>
            
            <div className="bg-white border border-slate-200 rounded-xl shadow-sm">
                <table className="w-full divide-y divide-slate-200">
                    <thead className="bg-slate-50">
                        <tr>
                            <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Name</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Status</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Created</th>
                            <th className="px-6 py-3 text-right text-xs font-medium text-slate-500 uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody className="bg-white divide-y divide-slate-200">
                        {campaigns.map(campaign => (
                            <tr key={campaign.id}>
                                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-slate-900">{campaign.name}</td>
                                <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{campaign.status}</td>
                                <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{new Date(campaign.created_at).toLocaleDateString()}</td>
                                <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <button onClick={() => onEdit(campaign)} className="text-indigo-600 hover:text-indigo-900">Edit</button>
                                    <button onClick={() => onDelete(campaign.id)} className="text-red-600 hover:text-red-900 ml-4">Delete</button>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </div>
    )
}