import useHandleCardClick from './Helpers/handleCardClick';
import axios from 'axios';
import { useOpenAIKey } from '../../helpers/OpenAI/OpenAIContext';
import { FaTrash } from 'react-icons/fa';
import HomepageCreator from '../Grid/components/HomepageCreator';
import React from 'react';
const FileCard = ({ file , onSelect , setMode }) => {
    const [contextApiKey] = useOpenAIKey();

    const onCardClick = useHandleCardClick(<HomepageCreator />, { file }, setMode);

    const onDelete = async () => {
        try {
            await axios.delete(`https://api.openai.com/v1/files/${file.id}`, {
                headers: {
                    'Authorization': `Bearer ${contextApiKey}`
                }
            });
            // Handle post-delete actions here, like refetching the list or updating the UI.
            alert("File deleted successfully!");
        } catch (error) {
            console.error('Error deleting file:', error);
            alert("Error deleting file.");
        }
    };

    return (
        <div onClick={onCardClick}
                className="relative overflow-hidden border-2 border-gray-300 hover:border-blue-500 transition-all duration-300 p-4 w-full h-auto rounded-xl backdrop-blur-xl bg-opacity-20 bg-white hover:bg-opacity-30 cursor-pointer shadow-md">
            
            {/* Horizontal Stripe on top */}
            <div className="absolute z-0 top-0 left-0 w-full h-16 bg-blue-100"></div>
    
            {/* Triangular shape on the bottom left */}
            <div className="absolute z-0 bottom-0 left-0 w-32 h-32 bg-blue-100" style={{ clipPath: 'polygon(0 0, 100% 0, 0 100%)' }}></div>
    
            {/* File Info */}
            <div className="z-10 relative mt-4">
                <h3 className="font-bold text-lg text-blue-500 mb-2">{file.filename}</h3>
                <p className="text-sm">ID: {file.id}</p>
                <p className="text-sm ">Size: {file.bytes} bytes</p>
                <p className="text-sm mb-2">Created At: {new Date(file.created_at * 1000).toLocaleDateString()}</p>
                <p className="text-xs ">Purpose: {file.purpose}</p>
            </div>
            
            {/* Delete Button */}
            <button className="z-20 absolute top-2 right-2 text-red-500 hover:text-red-700 transition-all duration-300 focus:outline-none" onClick={onDelete}>
                <FaTrash size={20} />
            </button>
        </div>
    );
    
    
};

export default FileCard