/**
 * 화면명: 선택 레이어 설정 카드
 * 레이어별 설정 제목과 활성화·닫기 영역을 공통 레이아웃으로 제공한다.
 */
"use client";

import type { ReactNode } from "react";

type Props = {
  title: string;
  enabled: boolean;
  onEnabledChange: (enabled: boolean) => void;
  onClose: () => void;
  children?: ReactNode;
  showToggle?: boolean;
};

/** 침수흔적도 설정과 같은 제목·토글·닫기·본문 여백을 제공한다. */
export default function LayerSettingCard({
  title,
  enabled,
  onEnabledChange,
  onClose,
  children,
  showToggle = true,
}: Props) {
  return (
    <div className="w-full overflow-visible rounded-[6px] border border-border bg-background shadow-blur">
      <div className="flex min-h-[28px] items-center justify-between border-b border-border pl-[0.8rem] pr-2">
        <div className="flex min-w-0 items-center gap-2">
          <span
            aria-hidden="true"
            className="h-[7px] w-[7px] shrink-0 rotate-45 bg-[#7CCE5C]"
          />
          <span className="truncate text-[12px] font-semibold text-label">
            {title}
          </span>
        </div>
        <div className="flex shrink-0 items-center gap-2">
          {showToggle ? (
            <button
              type="button"
              role="switch"
              aria-checked={enabled}
              aria-label={`${title} 적용 여부`}
              title={enabled ? `${title} 적용 중` : `${title} 미적용`}
              className={`relative h-[16px] w-[28px] rounded-full border transition-colors ${enabled ? "border-primary bg-primary" : "border-[#94a3b8] bg-[#cbd5e1]"}`}
              onClick={() => onEnabledChange(!enabled)}
            >
              <span
                className={`absolute top-1/2 h-[12px] w-[12px] -translate-y-1/2 rounded-full bg-white shadow-sm transition-[left] ${enabled ? "left-[14px]" : "left-[2px]"}`}
              />
            </button>
          ) : null}
          <button
            type="button"
            aria-label={`${title} 설정 닫기`}
            title="닫기"
            className="grid h-[20px] w-[20px] place-items-center bg-transparent text-[1.3rem] leading-none text-muted-foreground hover:text-foreground"
            onClick={onClose}
          >
            ×
          </button>
        </div>
      </div>
      {children ? (
        <div className="flex flex-col gap-[6px] p-[0.8rem] text-[1.15rem] text-label">
          {children}
        </div>
      ) : null}
    </div>
  );
}