import defaultSVG from '../../assets/SharedSVG/AI.svg';
import HomeView from '../Leumas/LeumasSmartHome/HomeView';
import React from 'react';
const HomeCard = ({ model , setMode  }) => {
    console.log(model);

    const handleClick = () => {
        setMode(<HomeView model={model} />);
    };
    const borderGlow = (type) => {
        if(!type) {
            type = 'both'
        }
        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 border-2 p-4 rounded-xl bg-opacity-20 bg-white backdrop-blur-md ${borderGlow(model?.type)} shadow-lg transition-transform transform hover:scale-105 cursor-pointer`}>
    <div className="flex items-center">
        <div className="w-10 h-10 bg-contain bg-no-repeat bg-center rounded-full border border-gray-300" style={{ backgroundImage: `url(${model?.image || defaultSVG})` }}></div>
        <div className="ml-4">
            <h2 className="font-bold text-lg hover:text-blue-500 cursor-pointer">{model?.title}</h2>
            <p className="text-sm mt-2">{model?.address}</p>
            <p className=" mb-4 text-xs">Updated: {new Date(model?.updatedAt).toLocaleDateString()}</p>

            <p className="text-xs mt-1 capitalize">{model?.type}</p>
        </div>
    </div>
</div>

    )
}

export default HomeCard;