Accordion

'use client';

import { Accordion } from '@akhatmirzo/ui';

const faq = [
  {
    value: 'delivery',
    title: 'Yetkazib berish qancha vaqt oladi?',
    body: "Toshkent bo'ylab 1 kun, viloyatlarga 2–3 ish kuni.",
  },
  {
    value: 'payment',
    title: "Qanday to'lov usullari bor?",
    body: "Click, Payme, Uzum va naqd pul. Karta orqali to'lov darhol tasdiqlanadi.",
  },
  {
    value: 'return',
    title: "Mahsulotni qaytarsa bo'ladimi?",
    body: "Ha, 14 kun ichida, qadoq buzilmagan bo'lsa.",
  },
];

export default function AccordionBasic() {
  return (
    <Accordion defaultValue="delivery" className="max-w-xl">
      {faq.map((q) => (
        <Accordion.Item key={q.value} value={q.value} title={q.title}>
          {q.body}
        </Accordion.Item>
      ))}
    </Accordion>
  );
}

'use client';

import { Accordion } from '@akhatmirzo/ui';

export default function AccordionVariants() {
  return (
    <div className="grid w-full gap-6 md:grid-cols-3">
      {(['separated', 'bordered', 'ghost'] as const).map((variant) => (
        <div key={variant} className="flex flex-col gap-2">
          <span className="text-xs font-medium text-text-muted">{variant}</span>
          <Accordion variant={variant} defaultValue="a">
            <Accordion.Item value="a" title="Yetkazib berish">
              Toshkent bo'ylab 1 kun.
            </Accordion.Item>
            <Accordion.Item value="b" title="To'lov">
              Click, Payme yoki naqd.
            </Accordion.Item>
            <Accordion.Item value="c" title="Qaytarish">
              14 kun ichida.
            </Accordion.Item>
          </Accordion>
        </div>
      ))}
    </div>
  );
}

'use client';

import { Accordion } from '@akhatmirzo/ui';

export default function AccordionMultiple() {
  return (
    <Accordion type="multiple" defaultValue={['delivery', 'payment']} className="max-w-xl">
      <Accordion.Item value="delivery" title="Yetkazib berish qancha vaqt oladi?">
        Toshkent bo'ylab 1 kun, viloyatlarga 2–3 ish kuni.
      </Accordion.Item>
      <Accordion.Item value="payment" title="Qanday to'lov usullari bor?">
        Click, Payme, Uzum va naqd pul.
      </Accordion.Item>
      <Accordion.Item value="return" title="Mahsulotni qaytarsa bo'ladimi?">
        Ha, 14 kun ichida, qadoq buzilmagan bo'lsa.
      </Accordion.Item>
    </Accordion>
  );
}

'use client';

import { Accordion } from '@akhatmirzo/ui';

export default function AccordionNonCollapsible() {
  return (
    <Accordion collapsible={false} defaultValue="courier" variant="bordered" className="max-w-xl">
      <Accordion.Item value="courier" title="Kuryer orqali">
        Ertasi kuni eshigingizgacha. Narxi — 25 000 so'm.
      </Accordion.Item>
      <Accordion.Item value="pickup" title="Olib ketish punktidan">
        Toshkentdagi 12 ta punktdan bepul olib ketasiz.
      </Accordion.Item>
      <Accordion.Item value="post" title="Pochta orqali">
        Viloyatlarga 2–3 ish kuni. Narxi — 18 000 so'm.
      </Accordion.Item>
    </Accordion>
  );
}

'use client';

import { Accordion, Badge } from '@akhatmirzo/ui';

export default function AccordionComposition() {
  return (
    <Accordion variant="bordered" className="max-w-xl">
      <Accordion.Item value="notifications">
        <Accordion.Trigger>
          <span className="flex items-center gap-2">
            Bildirishnomalar
            <Badge color="primary" size="sm">
              3 ta yangi
            </Badge>
          </span>
        </Accordion.Trigger>
        <Accordion.Content>
          <ul className="m-0 flex list-disc flex-col gap-1 pl-5">
            <li>Buyurtma #1042 yetkazildi</li>
            <li>Yangi sharh qoldirildi</li>
            <li>To'lov qabul qilindi</li>
          </ul>
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="security">
        <Accordion.Trigger>Xavfsizlik</Accordion.Trigger>
        <Accordion.Content>Parolni oxirgi marta 3 oy oldin o'zgartirgansiz.</Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="billing" disabled>
        <Accordion.Trigger>To'lov ma'lumotlari (tez orada)</Accordion.Trigger>
        <Accordion.Content>—</Accordion.Content>
      </Accordion.Item>
    </Accordion>
  );
}

'use client';

import { Accordion, Button } from '@akhatmirzo/ui';
import { useState } from 'react';

const sections = [
  { value: 'profile', title: "Shaxsiy ma'lumotlar", body: "Ism, telefon va tug'ilgan sana." },
  { value: 'address', title: 'Manzillar', body: 'Uy: Toshkent, Chilonzor tumani, 9-mavze.' },
  { value: 'cards', title: "To'lov kartalari", body: 'Uzcard •• 4521, Humo •• 9087.' },
];

export default function AccordionControlled() {
  const [open, setOpen] = useState<string[]>(['profile']);

  return (
    <div className="flex w-full max-w-xl flex-col gap-3">
      <div className="flex flex-wrap gap-2">
        <Button size="sm" variant="outline" onClick={() => setOpen(sections.map((s) => s.value))}>
          Hammasini ochish
        </Button>
        <Button size="sm" variant="outline" onClick={() => setOpen([])}>
          Hammasini yopish
        </Button>
      </div>
      <Accordion type="multiple" value={open} onValueChange={setOpen}>
        {sections.map((s) => (
          <Accordion.Item key={s.value} value={s.value} title={s.title}>
            {s.body}
          </Accordion.Item>
        ))}
      </Accordion>
    </div>
  );
}