'use client';

import { Plus, Sparkles } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useLayout } from '@/components/layouts/layout-39/components/context';
import { Pattern } from '@/components/layouts/layout-39/components/pattern';
import {
  Toolbar,
  ToolbarActions,
  ToolbarDescription,
  ToolbarHeading,
  ToolbarPageTitle,
} from '@/components/layouts/layout-39/components/toolbar';
import { ToolbarSearch } from '@/components/layouts/layout-39/components/toolbar-search';

export default function Page() {
  const { isMobile } = useLayout();
  const { isAsideOpen, asideToggle } = useLayout();

  return (
    <div className="container-fluid py-5">
      <ToolbarSearch />
      <Toolbar>
        <div className="flex items-center gap-3">
          <ToolbarHeading>
            <ToolbarPageTitle>Today Activities</ToolbarPageTitle>
            <ToolbarDescription>
              Manage your reminders, to do list, events, etc.
            </ToolbarDescription>
          </ToolbarHeading>
        </div>
        <ToolbarActions>
          <Button variant="mono">
            <Plus />
            New Activity
          </Button>
          {!isMobile && !isAsideOpen && (
            <Button mode="icon" variant="outline" onClick={asideToggle}>
              <Sparkles className="size-4 text-purple-800" />
            </Button>
          )}
        </ToolbarActions>
      </Toolbar>

      <Pattern className="rounded-lg grow h-screen border border-dashed border-input bg-background text-subtle-stroke relative text-border" />
    </div>
  );
}