import { IconType } from "react-icons/lib";
import {
    MdImage,
    MdPictureAsPdf,
    MdDescription,
    MdTableChart,
    MdSlideshow,
    MdCode,
    MdArchive,
    MdVideoFile,
    MdAudioFile,
    MdInsertDriveFile
} from "react-icons/md";

interface Props {
    fileName: string;
    showFileName?: boolean;
    iconSize?: number;
    className?: string;
    onClick?: () => void;
}

export default function Doctype({
    fileName,
    showFileName = true,
    iconSize = 16,
    className = "d-flex align-items-center gap-2 cursor-pointer fw-medium",
    onClick
}: Props) {
    // Extract file extension
    const getFileExtension = (filename: string): string => {
        const lastDot = filename.lastIndexOf('.');
        return lastDot !== -1 ? filename.slice(lastDot + 1).toLowerCase() : '';
    };

    // Get icon and color based on file extension
    const getFileIcon = (extension: string): { icon: IconType; color: string } => {
        switch (extension) {
            // Images
            case 'jpg':
            case 'jpeg':
            case 'png':
            case 'gif':
            case 'bmp':
            case 'svg':
            case 'webp':
                return { icon: MdImage, color: '#ff6b6b' };

            // PDF
            case 'pdf':
                return { icon: MdPictureAsPdf, color: '#dc3545' };

            // Documents
            case 'doc':
            case 'docx':
            case 'txt':
            case 'rtf':
                return { icon: MdDescription, color: '#0d6efd' };

            // Spreadsheets
            case 'xls':
            case 'xlsx':
            case 'csv':
                return { icon: MdTableChart, color: '#198754' };

            // Presentations
            case 'ppt':
            case 'pptx':
                return { icon: MdSlideshow, color: '#fd7e14' };

            // Code files
            case 'js':
            case 'ts':
            case 'jsx':
            case 'tsx':
            case 'html':
            case 'css':
            case 'php':
            case 'py':
            case 'java':
            case 'cpp':
            case 'c':
            case 'json':
            case 'xml':
                return { icon: MdCode, color: '#6f42c1' };

            // Archives
            case 'zip':
            case 'rar':
            case '7z':
            case 'tar':
            case 'gz':
                return { icon: MdArchive, color: '#6c757d' };

            // Videos
            case 'mp4':
            case 'avi':
            case 'mov':
            case 'wmv':
            case 'flv':
            case 'mkv':
            case 'webm':
                return { icon: MdVideoFile, color: '#e83e8c' };

            // Audio
            case 'mp3':
            case 'wav':
            case 'flac':
            case 'aac':
            case 'ogg':
                return { icon: MdAudioFile, color: '#20c997' };

            // Default
            default:
                return { icon: MdInsertDriveFile, color: '#6c757d' };
        }
    };

    const extension = getFileExtension(fileName);
    const { icon: IconComponent, color } = getFileIcon(extension);

    return (
        <div className={className} onClick={onClick}>
            <IconComponent
                size={iconSize}
                style={{ color, flexShrink: 0 }}
                title={`${extension.toUpperCase()} file`}
            />
            {showFileName && (
                <span className="text-truncate" title={fileName}>
                    {fileName}
                </span>
            )}
            {!showFileName && extension && (
                <small className="text-muted text-uppercase fw-medium">
                    {extension}
                </small>
            )}
        </div>
    );
}