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

import React from "react";
import { SelectBox } from '@common/business_components/ui'

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;
}

// 시작년도 selectArray 생성 함수
export function getStartYearArray({
  minYear = 1900,
  maxYear = new Date().getFullYear(),
  placeholder = "년",
  endYear,
}: {
  minYear?: number;
  maxYear?: number;
  placeholder?: string;
  endYear?: string;
} = {}) {
  const years = Array.from({ length: maxYear - minYear + 1 }, (_, i) =>
    (maxYear - i).toString()
  ).filter(y => !endYear || parseInt(y) <= parseInt(endYear));
  return [
    { val: "0", text: placeholder },
    ...years.map(y => ({ val: y, text: y })),
  ];
}

// 종료년도 selectArray 생성 함수
export function getEndYearArray({
  minYear = 1900,
  maxYear = new Date().getFullYear(),
  placeholder = "년",
  startYear,
}: {
  minYear?: number;
  maxYear?: number;
  placeholder?: string;
  startYear?: string;
} = {}) {
  const years = Array.from({ length: maxYear - minYear + 1 }, (_, i) =>
    (maxYear - i).toString()
  ).filter(y => !startYear || parseInt(y) >= parseInt(startYear));
  return [
    { val: "9999", text: placeholder },
    ...years.map(y => ({ val: y, text: y })),
  ];
}

export function YearRangeSelectBox({
  start,
  end,
  onChange,
  startLabel = "시작년도",
  endLabel = "",
  minYear = 1900,
  maxYear = new Date().getFullYear(),
  className = "",
  selectClass = "rounded-lg bg-white flex-shrink-0 w-[70px]"
}: 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 mr-8 ${className}`}>
      <SelectBox
        className="flex-1" 
        selectClass={selectClass}
        label={startLabel}
        selectArray={getStartYearArray()}
        onSelectValue={val => onChange({ start: String(val), end })}
        value={start}
        selectContentClass="z-[101]"
      />
      <span className="font-semibold text-xl mx-2">~</span>
      <SelectBox
        className="flex-1"
        selectClass={selectClass}
        label={endLabel}
        selectArray={getEndYearArray()}
        onSelectValue={val => onChange({ start, end: String(val) })}
        value={end}
        selectContentClass="z-[101]"
      />
    </div>
  );
}