'use client';

import * as React from 'react';
import {
  MessageCircle,
  FileText,
  Layout,
  LayoutGrid,
  LogOut,
  MessageSquareMore,
  Settings2,
} from 'lucide-react';

import * as Button from '@/components/ui/button';
import * as Divider from '@/components/ui/divider';
import * as Dropdown from '@/components/ui/dropdown';

export default function NavigationSupportDropdown() {
  return (
    <Dropdown.Root defaultOpen>
      <Dropdown.Trigger asChild>
        <Button.Root variant='neutral' mode='stroke' size='small'>
          Open
        </Button.Root>
      </Dropdown.Trigger>
      <Dropdown.Content>
        <Dropdown.Group>
          <Dropdown.Item>
            <Dropdown.ItemIcon as={Layout} />
            Dashboard
          </Dropdown.Item>
          <Dropdown.Item>
            <Dropdown.ItemIcon as={MessageCircle} />
            Messages
          </Dropdown.Item>
          <Dropdown.Item>
            <Dropdown.ItemIcon as={Settings2} />
            Settings
          </Dropdown.Item>
          <Dropdown.Item>
            <Dropdown.ItemIcon as={LayoutGrid} />
            Integrations
          </Dropdown.Item>
        </Dropdown.Group>

        <Divider.Root variant='text'>SUPPORT</Divider.Root>

        <Dropdown.Group>
          <Dropdown.Item>
            <Dropdown.ItemIcon as={FileText} />
            Guide
          </Dropdown.Item>
          <Dropdown.Item>
            <Dropdown.ItemIcon as={MessageSquareMore} />
            Help Center
          </Dropdown.Item>
        </Dropdown.Group>

        <Divider.Root variant='line-spacing' />

        <Dropdown.Group>
          <Dropdown.Item>
            <Dropdown.ItemIcon as={LogOut} />
            Logout
          </Dropdown.Item>
        </Dropdown.Group>
      </Dropdown.Content>
    </Dropdown.Root>
  );
}