import React, { ReactNode } from 'react';
import Image from 'next/image';
import styles from './ListCardHorizontal.module.scss';

interface ListCardHorizontalProps {
    title: string;
    subtitle?: string;
    image?: string;
    imageIcon?: ReactNode;
    imageAvatar?: string;
    body?: ReactNode;
    actions?: ReactNode;
    onClick?: () => void;
    className?: string;
}

export function ListCardHorizontal({
    title,
    subtitle,
    image,
    imageIcon,
    imageAvatar,
    body,
    actions,
    onClick,
    className = '',
}: ListCardHorizontalProps) {
    return (
        <div className={`${styles.listCardHorizontal} ${className}`} onClick={onClick}>
            <div className={styles.listCardImage}>
                {image ? (
                    <Image
                        src={image}
                        alt={title}
                        width={80}
                        height={80}
                        style={{ objectFit: 'cover' }}
                        unoptimized
                    />
                ) : imageAvatar ? (
                    <div className={styles.listCardAvatar}>{imageAvatar}</div>
                ) : imageIcon ? (
                    imageIcon
                ) : (
                    <div className={styles.listCardAvatar}>{title.charAt(0).toUpperCase()}</div>
                )}
            </div>
            <div className={styles.listCardContent}>
                <div className={styles.listCardHeader}>
                    <h3 className={styles.listCardTitle}>{title}</h3>
                    {subtitle && <p className={styles.listCardSubtitle}>{subtitle}</p>}
                    {body && <div className={styles.listCardBody}>{body}</div>}
                </div>
                {actions && <div className={styles.listCardActions}>{actions}</div>}
            </div>
        </div>
    );
}