"use client";

import { PrinterIcon } from '@heroicons/react/24/outline';
import { useTranslations } from 'next-intl';
import { YearMonth } from '../lib/db-types';

export interface PrintButtonProps {
  yearMonth: YearMonth;
}

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

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

  return (
    <div className="card card-compact card-bordered bg-base-100 shadow-s my-1">
      <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-xs text-left leading-[1.2em] w-[6em]">{t("print-codes-label")}</span>
        </span>
      </button>
    </div>
  );
};