import defaultSVG from '../../assets/SharedSVG/AI.svg';
import ChatArea from '../Leumas/ChatArea';
import {friendlyTime} from "../../helpers/friendlyTime"
import MonitorSelector from '../NPMDev/MonitorSelector/MonitorSelector';
import {useAuthUser} from "react-auth-kit"
import React from 'react';
const ConvoCard = ({ model , setMode  }) => {
    // console.log(model);
    const auth = useAuthUser()
    const handleClick = () => {
        // console.log("Opening chatArea")
        setMode(<ChatArea setMode={setMode} messages={model.messages} convoId={model._id} auth={auth}/>);
    };
    const borderGlow = (type) => {
        switch (type) {
            case 'ai': return 'border-blue-500';
            case 'user': return 'border-white';
            case 'both': return 'border-gradient-r-from-blue-500-to-white';
            default: return '';
        }
    };


    return (
        <div onClick={handleClick} 
        className={`w-200 h-80 relative p-4 border-2 rounded-xl backdrop-blur-xl bg-opacity-20 bg-white ${borderGlow(model.type)} shadow-xl transition-transform transform hover:scale-105 cursor-pointer`}>
       
            
            {/* Background Hexagon Shape */}
            <div className="absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 w-48 h-48 bg-blue-200" style={{ clipPath: 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)' }}></div>

            {/* User Image within a Circle, centered on the card */}
            <div className="absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 w-32 h-32 bg-contain bg-no-repeat bg-center rounded-full border-4 border-gray-300" style={{ backgroundImage: `url(${model.image || defaultSVG})` }}></div>

            {/* Text Details at the Bottom */}
            <div className="absolute bottom-0 left-0 p-4">
                <h2 className="font-bold text-lg hover:text-blue-500 cursor-pointer">{model.title}</h2>
                <p className="text-sm mt-2 ">{model.participants?.length} participants</p>
                <p className="text-sm mt-1 ">{model.messages?.length} messages</p>
                <p className="text-xs mt-1 ">{friendlyTime(model.lastUpdated)}</p>
            </div>

            {/* Glassmorphic Hover Effect */}
            <div className="absolute inset-0 backdrop-blur-sm transition-all duration-300 ease-in-out opacity-100 hover:opacity-0"></div>

            <div className="absolute z-10 top-4 right-4"> {/* Position the button on the top right corner */}
                <MonitorSelector component={<div>Testing</div>} />
            </div>
        </div>
    )
}

export default ConvoCard;