import React, { ReactNode } from 'react';
import { Check, Eye, Pencil } from 'lucide-react';

interface PlatformListRowProps {
    avatarLetter: string;
    primaryText: string;
    secondaryText?: string;
    badgeText: string;
    badgeColor?: string;
    tertiaryText: ReactNode;
    actions: ReactNode;
}

const PlatformListRow: React.FC<PlatformListRowProps> = ({
    avatarLetter,
    primaryText,
    secondaryText,
    badgeText,
    badgeColor = 'bg-gray-100 text-gray-800',
    tertiaryText,
    actions,
}) => {
    return (
        <tr className="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
            <td className="px-6 py-4 font-medium text-gray-900 dark:text-white">
                <div className="flex items-center gap-3">
                    <div className="w-8 h-8 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center text-indigo-600 dark:text-indigo-300 font-semibold text-sm">
                        {avatarLetter}
                    </div>
                    <div>
                        <div>{primaryText}</div>
                        {secondaryText && (
                            <div className="text-xs text-gray-500 dark:text-gray-400">{secondaryText}</div>
                        )}
                    </div>
                </div>
            </td>
            <td className="px-6 py-4">
                <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium capitalize ${badgeColor}`}>
                    {badgeText}
                </span>
            </td>
            <td className="px-6 py-4 text-gray-500 dark:text-gray-400 font-mono text-xs">
                <div className="flex items-center gap-2">
                    {tertiaryText}
                </div>
            </td>
            <td className="px-6 py-4 text-right">
                <div className="flex justify-end gap-2">
                    {actions}
                </div>
            </td>
        </tr>
    );
};

export default PlatformListRow;
