"use client";

import { InboxStackIcon, Square3Stack3DIcon } from '@heroicons/react/24/outline';
import { useTranslations } from 'next-intl';
import { YearMonth } from '../../../../../lib/db-types';
import Link from 'next/link';

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

export const MultiBillEditButton: React.FC<MultiBillEditButtonProps> = ({ yearMonth, className }) => {
  
  const t = useTranslations("home-page.multi-bill-edit-button");

  return (
    <div className={`card card-compact card-bordered bg-base-100 shadow-s my-1 ${className}`}>
      <Link href={`/home/multi-bill-edit/${yearMonth.year}/${yearMonth.month}`} className="card-body tooltip self-center" data-tip={t("tooltip")} data-umami-event="add-new-location">
        <span className='flex self-center'>
          <Square3Stack3DIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" />
          <span className="ml-1 self-center text-sm sm:text-xs text-left w-[5.5em] leading-[1.3em]">{t("tooltip")}</span>
        </span>
      </Link>
    </div>
  );
};