// In your main App.tsx or index.tsx
import '@profitflex/web/styles.css';

import { Button } from '@profitflex/web';

function App() {
  return (
    <Button variant="default" size="lg">
      Click me
    </Button>
  );
}

import { Button } from '@profitflex/web';

export function ButtonDemo() {
  return (
    <div className="flex gap-4">
      <Button variant="default">Default</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
    </div>
  );
}

import { Button } from '@profitflex/web';

export function ButtonSizes() {
  return (
    <div className="flex gap-4 items-center">
      <Button size="sm">Small</Button>
      <Button size="default">Default</Button>
      <Button size="lg">Large</Button>
      <Button size="icon">
        <svg>...</svg>
      </Button>
    </div>
  );
}

import { Button } from '@profitflex/web';
import { ChevronRight } from 'lucide-react';

export function ButtonWithIcon() {
  return (
    <Button>
      Continue
      <ChevronRight />
    </Button>
  );
}

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@profitflex/web';

export function AccordionDemo() {
  return (
    <Accordion type="single" collapsible>
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Is it styled?</AccordionTrigger>
        <AccordionContent>
          Yes. It comes with default styles that you can customize.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}