'use client';

import { PackageName } from '@/types/package';
import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
import { formatDate } from '@/lib/utils';

interface PackageListProps {
    packages: PackageName[];
    onEdit: (pkg: PackageName) => void;
    onDelete: (pkg: PackageName) => void;
    isLoading: boolean;
}

export default function PackageList({ packages, onEdit, onDelete, isLoading }: PackageListProps) {
    if (isLoading) {
        return (
            <div className="flex justify-center items-center py-12">
                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
            </div>
        );
    }

    if (!packages || packages.length === 0) {
        return (
            <div className="text-center py-12 bg-white dark:bg-gray-900 rounded-lg shadow">
                <p className="text-gray-500 dark:text-gray-400">هیچ پکیجی یافت نشد</p>
            </div>
        );
    }

    return (
        <div className="bg-white dark:bg-gray-900 shadow overflow-hidden sm:rounded-lg">
            <ul className="divide-y divide-gray-200 dark:divide-gray-800">
                {packages.map((pkg) => (
                    <li key={pkg.id} className="px-2 py-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                        <div className="flex items-center justify-between">
                            <div className="flex-1 min-w-0">
                                <div className="flex items-center space-x-3 space-x-reverse">
                                    {pkg.image && typeof pkg.image === 'string' && (
                                        <img
                                            src={pkg.image}
                                            alt={pkg.title || ''}
                                            className="h-10 w-10 rounded-full object-cover"
                                        />
                                    )}
                                    <div>
                                        <p className="text-sm font-medium text-indigo-600 dark:text-indigo-400 truncate px-2">
                                            {pkg.title || 'بدون عنوان'}
                                        </p>
                                        <p className="text-sm text-gray-500 dark:text-gray-400 px-2">
                                            {pkg.name || 'بدون نام'}
                                        </p>
                                    </div>
                                </div>
                                <div className="mt-2 sm:flex sm:justify-between">
                                    <div className="sm:flex sm:space-x-4 sm:space-x-reverse">


                                    </div>
                                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1 sm:mt-0">
                                        آخرین به‌روزرسانی: {formatDate(pkg.updated_at)}
                                    </p>
                                </div>
                            </div>
                            <div className="mr-4 flex-shrink-0 flex space-x-2 space-x-reverse">
                                <button
                                    onClick={() => onEdit(pkg)}
                                    className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 p-2 rounded-full hover:bg-indigo-50 dark:hover:bg-indigo-900/40 transition-colors"
                                >
                                    <PencilIcon className="h-5 w-5" />
                                </button>
                                <button
                                    onClick={() => onDelete(pkg)}
                                    className="text-red-600 dark:text-red-400 hover:text-red-900 p-2 rounded-full hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
                                >
                                    <TrashIcon className="h-5 w-5" />
                                </button>
                            </div>
                        </div>
                    </li>
                ))}
            </ul>
        </div>
    );
}