import React from 'react';

const LeumasButtonCard = ({ button, onClick }) => {
    const getButtonDetail = () => {
        switch(button.buttonType) {
            case 'audioBtn': return `Audio: ${button.audioUrl}`;
            case 'videoBtn': return `Video: ${button.videoUrl}`;
            case 'smartHomeBtn': return `Device ID: ${button.smartHomeDeviceId}`;
            case 'gptBtn': return `GPT Command: ${button.gptCommand}`;
            case 'actionBtn': return `Server Action: ${button.serverAction}`;
            case 'codeBtn': return `Code: ${button.code}`;
            case 'IrBtn': return `IR Signal Data ID: ${button.irSignalData}`;
            default: return 'Unknown button type';
        }
    }

    return (
        <div className="card-container" onClick={onClick}>
            <h3>{button.buttonType}</h3>
            <p>{getButtonDetail()}</p>
            <p>Owned by: {button.owner.username}</p> {/* Assuming owner has a username field */}
            <p>Created on: {new Date(button.createdAt).toLocaleDateString()}</p>
        </div>
    );
};

export default LeumasButtonCard;