import Link from 'next/link';
import { useRouter } from 'next/navigation';
import styles from './dmsComponents.module.css';

interface FileRowProps {
    file: {
        id: number | string;
        name: string;
        type: string;
        size: string;
        date: string;
        tags?: string[];
    };
    onDelete?: (id: number | string) => void;
    onShare?: (file: FileRowProps['file']) => void;
}

export default function FileRow({ file, onDelete, onShare }: FileRowProps) {
    const router = useRouter();
    return (
        <tr className={styles.fileRow}>
            <td>
                <div className={styles.fileName}>
                    <span className={styles.fileIcon}>
                        {file.type === 'PDF' ? '📄' : file.type === 'IMG' ? '🖼️' : '📁'}
                    </span>
                    <Link href={`/dashboard/documents/${file.id}`} className={styles.fileLink}>
                        {file.name}
                    </Link>
                </div>
            </td>
            <td>
                {file.tags && file.tags.length > 0 ? (
                    <div className={styles.tags}>
                        {file.tags.map((tag, i) => (
                            <span key={i} className={styles.tag}>{tag}</span>
                        ))}
                    </div>
                ) : (
                    <span className={styles.noTags}>-</span>
                )}
            </td>
            <td>{file.size}</td>
            <td>{file.date}</td>
            <td>
                <div className={styles.actions}>
                    <button
                        className={styles.actionBtn}
                        title="Preview"
                        onClick={() => router.push(`/dashboard/documents/${file.id}`)}
                    >
                        👁️
                    </button>
                    <button
                        className={styles.actionBtn}
                        title="Share with Team"
                        onClick={() => onShare?.(file)}
                    >
                        👥
                    </button>
                    <button className={styles.actionBtn} title="Download">⬇️</button>
                    <button className={styles.actionBtn} title="Delete" onClick={() => onDelete?.(file.id)}>🗑️</button>
                </div>
            </td>
        </tr>
    );
}