'use client';

import * as React from 'react';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
import { cn } from '@/lib/utils';

export type CalendarProps = React.ComponentProps<typeof DayPicker>;

/// shadcn 风格日历(react-day-picker v10)。teal 主题靠覆写 rdp 内置 CSS 变量,
/// 透传所有 DayPicker props(mode / captionLayout / disabled / startMonth / endMonth …)。
export function Calendar({ className, ...props }: CalendarProps) {
  return (
    <DayPicker
      showOutsideDays
      className={cn('p-2', className)}
      style={
        {
          '--rdp-accent-color': '#0d9488',
          '--rdp-accent-background-color': '#f0fdfa',
          '--rdp-day-width': '2rem',
          '--rdp-day-height': '2rem',
          '--rdp-day_button-width': '2rem',
          '--rdp-day_button-height': '2rem',
          '--rdp-font-family': 'inherit',
          fontSize: '12.5px',
        } as React.CSSProperties
      }
      {...props}
    />
  );
}
