import type { DayButtonProps } from "react-day-picker";
import { Button } from "../button";

function DayButton(props: DayButtonProps) {
  const { day, modifiers, onClick, ...buttonProps } = props;

  return (
    <Button
      variant="none"
      {...buttonProps}
      className={`relative w-full bg-transparent p-0 text-center text-muted ${
        modifiers.selected && "text-white"
      }`}
      onClick={(e) => {
        if (onClick) {
          onClick(e);
        }
      }}
      onDoubleClick={(e) => {
        if (modifiers.selected && onClick) {
          onClick(e);
        }
      }}
      disabled={modifiers.disabled}
    >
      {day.date.getDate()}

      {modifiers.disabled && (
        <div className="pointer-events-none absolute left-1/2 top-1/2 h-px w-3/5 -translate-x-1/2 -translate-y-1/2 -rotate-45 bg-current opacity-50" />
      )}
    </Button>
  );
}
export default DayButton;