import React from 'react';
import {useTheme} from "../Theme/ThemeContext"
const DefaultCard = ({ model, item = {}, setMode }) => {
    
  const { theme } = useTheme(); 
  const bgColor = theme === 'dark' ? 'bg-blue-500' : 'bg-blue-50';

    return (
        <div className={`border rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out ${bgColor} cursor-pointer `}>
            <div className="p-5">
                <h3 className="text-lg md:text-xl font-semibold mb-2 text-gray-900 dark:text-white">{item?.title || "Untitled Item"}</h3>
                <p className="mt-2 text-xs md:text-sm text-gray-600 dark:text-gray-400">
                    {item?.description || `No description provided for ${model}.`}
                </p>
            </div>
            <div className="px-5 py-3 bg-gray-100 dark:bg-gray-700 flex justify-between items-center">
                <span className="text-xs md:text-sm font-medium text-gray-600 dark:text-gray-300">{item?.date || "No Date"}</span>
                <button
                    className="text-blue-500 dark:text-blue-400 text-xs md:text-sm hover:underline"
                    onClick={() => setMode(`edit/${item?._id}`)}
                >
                    Edit
                </button>
            </div>
        </div>
    );
};

export default DefaultCard;