import { PlantIcon } from './PlantIcon'
import { cardActionClass, cardDangerClass } from '@/components/ui/cardActions'
import { CATEGORY_LABELS, isBuiltin, type Plant } from '@/lib/plants'
import { formatSpacing, type UnitPref } from '@/lib/units'

/**
 * One catalog plant as a card: icon tile tinted with the plant's color, name,
 * category + mature spacing (unit-aware), and actions. Built-ins are badged and
 * offer only "Duplicate" (they're read-only); own plants add Edit/Delete.
 */
export function PlantCard({
  plant,
  unit,
  onEdit,
  onDelete,
  onDuplicate,
}: {
  plant: Plant
  unit: UnitPref
  onEdit: () => void
  onDelete: () => void
  onDuplicate: () => void
}) {
  const builtin = isBuiltin(plant)
  return (
    <div className="flex flex-col rounded-xl border border-border bg-surface">
      <div className="flex items-start gap-3 p-4">
        <PlantIcon color={plant.color} icon={plant.icon} className="h-11 w-11 rounded-lg text-2xl" />
        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-2">
            <h3 className="truncate font-semibold text-fg">{plant.name}</h3>
            {builtin && (
              <span className="shrink-0 rounded bg-border/60 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted">
                Built-in
              </span>
            )}
          </div>
          <p className="mt-0.5 text-sm text-muted">
            {CATEGORY_LABELS[plant.category]} · {formatSpacing(plant.spacingCm, unit)} spacing
          </p>
          {plant.notes && <p className="mt-1 line-clamp-2 text-xs text-muted">{plant.notes}</p>}
        </div>
        <span
          className="mt-1 h-4 w-4 shrink-0 rounded-full border border-black/10 dark:border-white/10"
          style={{ backgroundColor: plant.color }}
          title={plant.color}
        />
      </div>
      <div className="flex justify-end gap-1 border-t border-border px-2 py-1.5">
        <button type="button" onClick={onDuplicate} className={cardActionClass}>
          Duplicate
        </button>
        {!builtin && (
          <button type="button" onClick={onEdit} className={cardActionClass}>
            Edit
          </button>
        )}
        {!builtin && (
          <button type="button" onClick={onDelete} className={cardDangerClass}>
            Delete
          </button>
        )}
      </div>
    </div>
  )
}