dyolink/frontend/src/components/ui/treatment/DayStripCard.tsx

'use client';

import { Trash2 } from 'lucide-react';
import { Card } from '@/components/ui/shared/Card';
import { treatmentTypeBannerStyle } from '@/components/shared/treatmentTypeDisplay';
import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
import type { DayStripItem } from '@/components/treatment/dayStrip';

interface DayStripCardProps {
  item: DayStripItem;
  selected: boolean;
  treatmentCatalog: TreatmentCatalogEntry[];
  onSelect: () => void;
  canDelete?: boolean;
  onDelete?: () => void;
  deleteAriaLabel?: string;
}

export function DayStripCard({
  item,
  selected,
  treatmentCatalog,
  onSelect,
  canDelete = false,
  onDelete,
  deleteAriaLabel,
}: DayStripCardProps) {
  const purposeIndex = treatmentCatalog.findIndex((e) => e.code === item.colorCode);
  const bannerStyle = treatmentTypeBannerStyle(item.colorCode, purposeIndex < 0 ? 0 : purposeIndex);
  const selectedClass = selected
    ? 'ring-2 ring-primary ring-offset-2 ring-offset-background-secondary shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]'
    : 'hover:brightness-110';
  const shellClass = `
        text-start rounded-[var(--radius-sm)] w-full sm:w-auto sm:min-w-[200px] sm:max-w-[280px] transition-shadow min-h-[52px]
        focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/45
        ${selectedClass}
      `;

  const body = (
    <>
      {item.timeLabel ? (
        <p className="text-[11px] font-medium tabular-nums opacity-95">{item.timeLabel}</p>
      ) : (
        <p className="text-[11px] font-medium opacity-95">{item.subtitle}</p>
      )}
      <p className="text-sm font-medium leading-tight truncate mt-0.5">
        {item.patientFirstName} {item.patientLastName}
      </p>
      {item.timeLabel ? (
        <p className="text-[11px] opacity-90 mt-0.5 truncate">{item.subtitle}</p>
      ) : null}
    </>
  );

  if (!canDelete || !onDelete) {
    return (
      <Card
        as="button"
        type="button"
        onClick={onSelect}
        padding="none"
        style={bannerStyle}
        className={`${shellClass} px-3 py-2`}
      >
        {body}
      </Card>
    );
  }

  return (
    <Card
      padding="none"
      style={bannerStyle}
      className={`${shellClass} flex items-stretch overflow-hidden`}
    >
      <button
        type="button"
        onClick={onSelect}
        className="min-w-0 flex-1 text-start px-3 py-2 focus:outline-none"
      >
        {body}
      </button>
      <button
        type="button"
        onClick={(event) => {
          event.stopPropagation();
          onDelete();
        }}
        aria-label={deleteAriaLabel}
        title={deleteAriaLabel}
        className="shrink-0 self-center pe-2.5 ps-1 opacity-80 hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/45 rounded-[var(--radius-sm)] text-inherit"
      >
        <Trash2 className="h-4 w-4 text-inherit" aria-hidden />
      </button>
    </Card>
  );
}