import * as React from 'react';
import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
import { DayPicker } from 'react-day-picker';

import { classNames } from '../../lib/utils';

import { buttonVariants } from './button';

function Calendar({
  className,
  classNames: classNamesProp,
  showOutsideDays = true,
  ...props
}: React.ComponentProps<typeof DayPicker>) {
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={classNames('p-3', className)}
      classNames={{
        months: 'relative flex flex-col gap-4 sm:flex-row',
        month: 'flex w-full flex-col gap-4',
        nav: 'absolute inset-x-0 top-0 flex w-full items-center justify-between',
        button_previous: classNames(
          buttonVariants({ variant: 'ghost' }),
          'size-7 p-0 text-text-muted hover:text-foreground'
        ),
        button_next: classNames(
          buttonVariants({ variant: 'ghost' }),
          'size-7 p-0 text-text-muted hover:text-foreground'
        ),
        month_caption: 'flex h-7 items-center justify-center',
        caption_label: 'text-sm font-medium text-foreground',
        month_grid: 'w-full border-collapse',
        weekdays: 'flex',
        weekday: 'w-8 rounded-md text-[0.8rem] font-normal text-text-muted',
        week: 'mt-2 flex w-full',
        day: 'relative size-8 p-0 text-center text-sm text-foreground focus-within:relative focus-within:z-20',
        day_button: classNames(
          buttonVariants({ variant: 'ghost' }),
          'size-8 p-0 font-normal aria-selected:opacity-100'
        ),
        selected:
          'rounded-md bg-primary text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground',
        today: 'rounded-md bg-muted text-foreground',
        outside: 'text-text-muted/50 aria-selected:text-text-muted/50',
        disabled: 'text-text-muted/40 [&>button]:pointer-events-none',
        hidden: 'invisible',
        ...classNamesProp,
      }}
      components={{
        Chevron: ({ orientation, className: chevronClassName, ...rest }) =>
          orientation === 'left' ? (
            <ChevronLeftIcon
              className={classNames('size-4', chevronClassName)}
              {...rest}
            />
          ) : (
            <ChevronRightIcon
              className={classNames('size-4', chevronClassName)}
              {...rest}
            />
          ),
      }}
      {...props}
    />
  );
}

export { Calendar };