"use client";
import style from "./ServiceItem.module.css";
import Avatar from "@components/Avatar/Avatar";
import { AppointmentEventByClient } from "@core/Models/Appointments.model";
import dayjs from "dayjs";
import "dayjs/locale/es";
import { testContrast } from "@core/app/theme/scheduleView";
import { formatDateLarge, formatTimeInterval } from "@core/helpers/format";
import ServiceRatingSummary from "@components/ServiceRatingSummary/ServiceRatingSummary";

dayjs.locale("es");

interface ServiceItemProps {
    style?: React.CSSProperties;
    data: AppointmentEventByClient;
    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
}

export default function ServiceItem(props: ServiceItemProps): React.ReactElement {
    return (
        <div
            className={style.serviceCard}
            style={{ 
                border: `1px solid ${props.data.color || "var(--primary)"}`,
                borderLeft: `6px solid ${props.data.color || "var(--primary)"}`
            }}
            onClick={props.onClick}
        >
            <div className={style.cardHeader}>
                <div className={style.serviceTitle}>{props.data.serviceName}</div>
                <div className={style.serviceTimeBadge} style={{ backgroundColor: props.data.color || "var(--primary)" }}>
                    {formatTimeInterval(props.data.startTime, props.data.endTime)}
                </div>
            </div>

            {props.data.serviceDescription && (
                <div className={style.serviceDescription}>{props.data.serviceDescription}</div>
            )}

            <ServiceRatingSummary serviceId={props.data.serviceId} variant="card" />

            <div className={style.cardFooter}>
                <div className={style.collaboratorInfo}>
                    <Avatar
                        name={props.data.collaboratorName}
                        size="small"
                        border="none"
                        src={props.data.collaboratorAvatar}
                        alt={props.data.collaboratorName}
                    />
                    <div className={style.collaboratorName} style={{ color: props.data.color }}>
                        {props.data.collaboratorName}
                    </div>
                </div>
                <div className={style.appointmentDate}>
                    {formatDateLarge(props.data.appointmentDate)}
                </div>
            </div>
        </div>
    );
}