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';

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>

        <span className='grid self-center' data-tip="Dodaj novi mjesec">
          <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" />
        </span>

        <div className="divider text-2xl">2023-05</div>

        <div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
          <div className="card-body">
            <Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-3 right-3 text-2xl" />
            <h2 className="card-title">2023-05 Budakova</h2>
            <div className="card-actions">
              <div className="badge badge-lg badge-success cursor-pointer">GSKG</div>
              <div className="badge badge-lg badge-neutral cursor-pointer">HEP Elektra</div>
              <div className="badge badge-lg badge-neutral cursor-pointer">Iskon</div>
              <div className="badge badge-lg badge-neutral cursor-pointer">Plinara</div>
              <div className="tooltip" data-tip="Dodaj novi tip računa">
                <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl" />
              </div>
            </div>
          </div>
        </div>

        <div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
          <div className="card-body">
            <Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-3 right-3 text-2xl" />
            <h2 className="card-title">2023-05 Kopernikova</h2>
            <div className="card-actions">
              <div className="badge badge-lg badge-success cursor-pointer">GSKG</div>
              <div className="badge badge-lg badge-neutral cursor-pointer">HEP Elektra</div>
              <div className="badge badge-lg badge-neutral cursor-pointer">Iskon</div>
              <div className="badge badge-lg badge-neutral cursor-pointer">Plinara</div>
              <div className="tooltip" data-tip="Dodaj novi tip računa">
                <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl" />
              </div>
            </div>
          </div>
        </div>

        <div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
          <div className="card-body">
            <span className='grid self-center' data-tip="Dodaj novu lokaciju">
              <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" />
            </span>
          </div>
        </div>

        <div className="divider text-2xl">2023-06</div>

        <div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
          <div className="card-body">
            <Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-3 right-3 text-2xl" />
            <h2 className="card-title">2023-05 Šišićeva</h2>
            <div className="card-actions">
              <div className="badge badge-lg badge-success cursor-pointer">GSKG</div>
              <div className="badge badge-lg badge-neutral cursor-pointer">HEP Elektra</div>
              <div className="badge badge-lg badge-neutral cursor-pointer">Iskon</div>
              <div className="badge badge-lg badge-neutral cursor-pointer">Plinara</div>
              <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl" />
            </div>
          </div>
        </div>
        <div className="card card-compact card-bordered max-w-sm bg-base-100 shadow-s my-1">
          <div className="card-body">
            <form>
              <Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-4 right-4 text-2xl" />
              <TrashIcon className="h-[1em] w-[1em] absolute cursor-pointer text-error bottom-5 right-4 text-2xl" />
              <h1 className="text-2xl">GSKG</h1>
              <p className="my-2">Pričuva, Voda, Smeće</p>
              <a href="#document.pdf" className='text-center block max-w-[24em] text-nowrap truncate inline-block'>
                <DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" />
                2023-22-12 document GSKG račun za 2023.pdf
              </a>
              <input type="file" className="file-input file-input-bordered w-full max-w-sm file-input-xs my-2" />
              <div className="form-control w-32 p-1">
                <label className="cursor-pointer label p-0">
                  <span className="label-text">Plaćeno</span> 
                  <input type="checkbox" className="toggle toggle-success" checked={false} />
                </label>
              </div>
              <textarea className="textarea textarea-bordered my-2 w-full max-w-sm block" placeholder="Napomena"></textarea>
              <button className="btn btn-primary">Spremi</button>
            </form>
          </div>
        </div>
        <div className="card card-compact card-bordered max-w-sm bg-base-100 shadow-s my-1">
          <div className="card-body">
            <form>
              <input type="text" placeholder="Naziv računa" className="input input-bordered w-full" value="GSKG" />
              <textarea className="textarea textarea-bordered my-1 w-full max-w-sm block" placeholder="Opis" value="Pričuva, Voda, Smeće"></textarea>
              <button className="btn btn-primary">Spremi</button>
            </form>
          </div>
        </div>
        <div className="card card-compact card-bordered max-w-sm bg-base-100 shadow-s my-1">
          <div className="card-body">
            <form>
              <input type="text" placeholder="Naziv lokacije" className="input input-bordered w-full" defaultValue="Budakova" />
              <textarea className="textarea textarea-bordered my-1 w-full max-w-sm block" placeholder="Opis" value="Stan u Budakovoj"></textarea>
              <button className="btn btn-primary">Spremi</button>
            </form>
          </div>
        </div>
    </main>
  );
}