import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import Typography, {
  TypographyProps,
} from "@/components/ui/Typography/Typography";
import { useTimer, UseTimerOptions } from "@/hooks/timer/useTimer";

interface HeaderProps extends React.ComponentProps<"header"> {
  button?: React.ComponentProps<typeof Button>;
  timerHookProps?: UseTimerOptions;
  timer?: TypographyProps<"span">;
  text?: TypographyProps<"p">;
}

export default function Header({
  button,
  text,
  timerHookProps,
  timer,
  ...props
}: HeaderProps) {
  const { time } = useTimer({
    initialSeconds: timerHookProps?.initialSeconds || 600,
    ...timerHookProps,
  });

  return (
    <header
      {...props}
      className={cn(
        "w-full",
        "bg-gradient-to-r from-[#FFFBEB] to-[#FFF7ED]",
        "p-4 min-h-[96px]",
        "flex justify-between items-center",
        "border-2 border-[#FDE68A] rounded-[12px]",
        "shadow-[0px_4px_6px_0px_#0000001A]",
        props.className
      )}
    >
      <div className="flex flex-col">
        {text && (
          <Typography
            size="sm"
            weight="semiBold"
            font="inter"
            {...text}
            className={cn("leading-[20px] text-[#92400E]", text.className)}
          />
        )}
        <Typography
          size="2xl"
          weight="bold"
          font="inter"
          {...timer}
          className={cn("leading-[32px] text-[#78350F]", timer?.className)}
        >
          {time}
        </Typography>
      </div>
      {button && (
        <Button
          {...button}
          className={cn(
            "bg-[#D9780E]! rounded-[8px] font-inter py-2 px-6 font-bold animate-scale-pulse",
            button.className
          )}
        />
      )}
    </header>
  );
}