import Link from 'next/link';
import styles from '@/app/ui/home.module.css';
import { lusitana } from './ui/fonts';
import Image from 'next/image';

import {
  Cog8ToothIcon,
  TrashIcon,
  PlusCircleIcon,
  DocumentIcon,
  MapIcon,
  MapPinIcon
} from '@heroicons/react/24/outline';
import { LocationCard } from './ui/LocationCard';
import { BillPaymentForm } from './ui/BillPaymentForm';
import { LocationEditForm } from './ui/LocationEditForm';
import { BillTemplateForm } from './ui/BillTemplateForm';
import { MonthTitle } from './ui/MonthTitle';
import { AddMonthButton } from './ui/AddMonthButton';
import { AddLocationButton } from './ui/AddLocationButton';

export default function Page() {
  return (
    <main className="flex min-h-screen flex-col p-6 bg-base-300">
        <p>https://tailwindcss.com/docs/font-weight</p>
        <p>https://heroicons.com/</p>

        <AddMonthButton />

        <MonthTitle month={new Date(2023, 4)} />

        <LocationCard
          month={new Date(2023, 4)}
          location={{id: 1, name: 'Budakova'}}
          bills={[
            {id: 1, name: 'GSKG', paid: true},
            {id: 2, name: 'HEP Elektra', paid: false},
            {id: 3, name: 'Iskon', paid: false},
            {id: 4, name: 'Plinara', paid: false},
          ]} />

        <LocationCard
          month={new Date(2023, 4)}
          location={{id: 1, name: 'Kopernikova'}}
          bills={[
            {id: 1, name: 'Toplana', paid: true},
            {id: 2, name: 'HEP Elektra', paid: true},
            {id: 3, name: 'GSKG', paid: true},
          ]} />

        <AddLocationButton />

        <MonthTitle month={new Date(2023, 5)} />

        <LocationCard
          month={new Date(2023, 5)}
          location={{id: 1, name: 'Šišićeva'}}
          bills={[
            {id: 1, name: 'Toplana', paid: true},
            {id: 2, name: 'HEP Elektra', paid: true},
            {id: 3, name: 'GSKG', paid: true},
          ]} />
        
        <BillPaymentForm bill={{id: 1, name: 'GSKG', description: 'Pričuva, Voda, Smeće', paid: true}} />
        <LocationEditForm />
        <BillTemplateForm />
    </main>
  );
}