import { VESSEL_TYPE_ORDER, VESSEL_TYPES } from "../../entities/vessel/model/meta";
import type { VesselTypeCode } from "../../entities/vessel/model/types";

type Props = {
  enabled: Record<VesselTypeCode, boolean>;
  totalCount: number;
  countsByType: Record<VesselTypeCode, number>;
  onToggle: (type: VesselTypeCode) => void;
  onToggleAll: () => void;
};

const TB = "cursor-pointer rounded-[5px] border p-1 text-center transition-all duration-150 select-none";
const TB_ON = "border-wing-accent bg-wing-accent/10";
const TB_OFF = "border-transparent bg-wing-card hover:border-wing-border";

export function TypeFilterGrid({ enabled, totalCount, countsByType, onToggle, onToggleAll }: Props) {
  const allOn = VESSEL_TYPE_ORDER.every((c) => enabled[c]);

  return (
    <div className="grid grid-cols-3 gap-0.75">
      <div className={`col-span-full ${TB} ${allOn ? TB_ON : TB_OFF}`} onClick={onToggleAll}>
        <div className="text-[11px] font-extrabold text-wing-accent">전체</div>
        <div className="text-[8px] text-wing-muted">{totalCount}척</div>
      </div>
      {VESSEL_TYPE_ORDER.map((code) => {
        const t = VESSEL_TYPES[code];
        const cnt = countsByType[code] ?? 0;
        return (
          <div key={code} className={`${TB} ${enabled[code] ? TB_ON : TB_OFF}`} onClick={() => onToggle(code)}>
            <div className="text-[11px] font-extrabold" style={{ color: t.color }}>{code}</div>
            <div className="text-[8px] text-wing-muted">{cnt}척</div>
          </div>
        );
      })}
    </div>
  );
}
