"use client";

import { PrinterIcon } from '@heroicons/react/24/outline';
import { useTranslations } from 'next-intl';
import { YearMonth } from '@evidencija-rezija/shared-code';

export interface PrintButtonProps {
  yearMonth: YearMonth;
    className?: string;
}

export const PrintButton: React.FC<PrintButtonProps> = ({ yearMonth, className }) => {
  const t = useTranslations("home-page.month-card");

  const handlePrintClick = () => {
    window.open(`/home/print/${yearMonth.year}/${yearMonth.month}`, '_blank');
  };

  return (
    <div className={`card card-compact card-bordered bg-base-100 shadow-s my-1 ${className}`}>
      <button 
        className="card-body tooltip self-center cursor-pointer" 
        onClick={handlePrintClick}
        data-tip={t("print-codes-tooltip")}
      >
        <span className='flex self-center'>
          <PrinterIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" />
          <span className="ml-1 self-center text-sm sm:text-xs text-left sm:w-[5.5em] leading-[1.3em]">{t("print-codes-label")}</span>
        </span>
      </button>
    </div>
  );
};