import type { Component } from 'solid-js';
import { UploadCloud } from 'lucide-solid';

interface FileUploadProps {
    onFileSelect: (text: string) => void;
}

const FileUpload: Component<FileUploadProps> = (props) => {
    const handleFileChange = (e: Event) => {
        const input = e.target as HTMLInputElement;
        const file = input.files?.[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = (event) => {
            const text = event.target?.result as string;
            props.onFileSelect(text);
        };
        reader.readAsText(file);
    };

    return (
        <div class="flex items-center justify-center w-full">
            <label
                for="dropzone-file"
                class="flex flex-col items-center justify-center w-full h-48 border-2 border-primary/20 border-dashed rounded-[2rem] cursor-pointer bg-muted/30 hover:bg-primary/5 transition-all group shadow-inner"
            >
                <div class="flex flex-col items-center justify-center pt-5 pb-6">
                    <div class="p-4 bg-card rounded-2xl shadow-premium mb-4 group-hover:scale-110 transition-transform duration-500">
                        <UploadCloud class="w-10 h-10 text-primary" />
                    </div>
                    <p class="mb-2 text-sm text-foreground font-black tracking-tight">
                        <span class="text-primary underline underline-offset-4 decoration-2">Click to upload</span> or drag and drop
                    </p>
                    <p class="text-[10px] font-bold text-muted-foreground uppercase tracking-[0.2em]">CSV files only</p>
                </div>
                <input
                    id="dropzone-file"
                    type="file"
                    class="hidden"
                    accept=".csv"
                    onChange={handleFileChange}
                />
            </label>
        </div>
    );
};

export default FileUpload;