frontend/apps/sn/app/components/ui/YearRangeSelectBox.tsx

import React from "react";
import { SelectBox2 } from "@common/business_components/ui/select/index-2";

interface YearRangeSelectBoxProps {
  start: string;
  end: string;
  onChange: (range: { start: string; end: string }) => void;
  startLabel?: string;
  endLabel?: string;
  minYear?: number;
  maxYear?: number;
  className?: string;
  selectClass?: string;
}

export function YearRangeSelectBox({
  start,
  end,
  onChange,
  startLabel = "시작년도",
  endLabel = "",
  minYear = 1900,
  maxYear = new Date().getFullYear(),
  className = "",
  selectClass = "rounded-lg bg-white"
}: YearRangeSelectBoxProps) {
  // 시작년도 배열
  const getStartYearArray = () => {
    const years = Array.from({ length: maxYear - minYear + 1 }, (_, i) =>
      (maxYear - i).toString()
    ).filter(y => !end || parseInt(y) <= parseInt(end));
    return [
      { val: "0", text: "년" },
      ...years.map(y => ({ val: y, text: y })),
    ];
  };
  // 종료년도 배열
  const getEndYearArray = () => {
    const years = Array.from({ length: maxYear - minYear + 1 }, (_, i) =>
      (maxYear - i).toString()
    ).filter(y => !start || parseInt(y) >= parseInt(start));
    return [
      { val: "9999", text: "년" },
      ...years.map(y => ({ val: y, text: y })),
    ];
  };

  return (
    <div className={`flex items-center ${className}`}>
      <SelectBox2
        className="w-50 mr-3"
        selectClass={selectClass}
        label={startLabel}
        selectArray={getStartYearArray()}
        onSelectValue={val => onChange({ start: String(val), end })}
        value={start}
      />
      <span className="font-semibold text-xl mx-2">~</span>
      <SelectBox2
        className="w-50 mr-8"
        selectClass={selectClass}
        label={endLabel}
        selectArray={getEndYearArray()}
        onSelectValue={val => onChange({ start, end: String(val) })}
        value={end}
      />
    </div>
  );
}