IconButton

'use client';

import { IconButton } from '@akhatmirzo/ui';
import { Heart, Pencil, Plus, Share2, Trash2 } from 'lucide-react';

export default function IconButtonVariants() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <IconButton variant="primary" aria-label="Qo'shish">
        <Plus />
      </IconButton>
      <IconButton aria-label="Sevimlilarga qo'shish">
        <Heart />
      </IconButton>
      <IconButton variant="outline" aria-label="Tahrirlash">
        <Pencil />
      </IconButton>
      <IconButton variant="ghost" aria-label="Ulashish">
        <Share2 />
      </IconButton>
      <IconButton variant="danger" aria-label="O'chirish">
        <Trash2 />
      </IconButton>
    </div>
  );
}

'use client';

import { IconButton } from '@akhatmirzo/ui';
import { X } from 'lucide-react';

export default function IconButtonSizes() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <IconButton variant="outline" size="sm" aria-label="Yopish">
        <X />
      </IconButton>
      <IconButton variant="outline" size="md" aria-label="Yopish">
        <X />
      </IconButton>
      <IconButton variant="outline" size="lg" aria-label="Yopish">
        <X />
      </IconButton>
    </div>
  );
}

'use client';

import { IconButton } from '@akhatmirzo/ui';
import { Download, Trash2 } from 'lucide-react';
import { useState } from 'react';

export default function IconButtonStates() {
  const [loading, setLoading] = useState(false);

  const download = () => {
    setLoading(true);
    setTimeout(() => setLoading(false), 1500);
  };

  return (
    <div className="flex flex-wrap items-center gap-3">
      <IconButton
        variant="primary"
        loading={loading}
        onClick={download}
        aria-label="Hisobotni yuklab olish"
        labels={{ loading: 'Yuklab olinmoqda' }}
      >
        <Download />
      </IconButton>
      <IconButton variant="danger" disabled aria-label="O'chirish">
        <Trash2 />
      </IconButton>
    </div>
  );
}

'use client';

import { IconButton } from '@akhatmirzo/ui';
import { Bold, Italic, Plus, Underline } from 'lucide-react';

export default function IconButtonToolbar() {
  return (
    <div className="flex flex-wrap items-center gap-6">
      <div
        role="toolbar"
        aria-label="Matn formati"
        className="flex items-center gap-1 rounded-lg border border-border bg-surface p-1"
      >
        <IconButton variant="ghost" size="sm" aria-label="Qalin">
          <Bold />
        </IconButton>
        <IconButton variant="ghost" size="sm" aria-label="Kursiv">
          <Italic />
        </IconButton>
        <IconButton variant="ghost" size="sm" aria-label="Tagiga chizilgan">
          <Underline />
        </IconButton>
      </div>
      <IconButton variant="primary" size="lg" className="rounded-full" aria-label="Yangi buyurtma">
        <Plus />
      </IconButton>
    </div>
  );
}

'use client';

import { IconButton } from '@akhatmirzo/ui';
import { Settings } from 'lucide-react';

export default function IconButtonAsChild() {
  return (
    <IconButton asChild variant="outline" aria-label="Sozlamalar">
      <a href="#props">
        <Settings />
      </a>
    </IconButton>
  );
}