import { Cog8ToothIcon, PlusCircleIcon } from "@heroicons/react/24/outline";
import React from "react"

const LocationCardSkeleton: React.FC = () =>
<div className={`skeleton card card-compact card-bordered max-w-[30em] bg-base-100 shadow-s my-1`}>
    <div className="card-body">
        <h2 className="card-title mr-[2em]"></h2>
    </div>
</div>;

export interface MonthCardSkeletonProps {
    checked?: boolean;
}

export const MonthCardSkeleton: React.FC<MonthCardSkeletonProps> = ({checked=false}) =>
    <div className={`skeleton collapse collapse-plus bg-base-200 my-1`}>
      <input type="checkbox" name="my-accordion-3" checked={checked} disabled />
      <div className="collapse-title text-xl font-medium w-[15em]">
      </div>
      <div className="collapse-content">
        <LocationCardSkeleton />
        <LocationCardSkeleton />
      </div>
    </div>;


export const HomePageSkeleton: React.FC = () =>
<>
    <MonthCardSkeleton checked={true} />
    <MonthCardSkeleton />
    <MonthCardSkeleton />
</>;