'use client';

import React from 'react';
import * as Accordion from '@radix-ui/react-accordion';
import {
  CreditCard,
  Lock,
  MapPin,
  Minus,
  Plus,
  Repeat2,
  UserCircle,
} from 'lucide-react';

import * as Input from '@/components/ui/input';
import { cn } from '@/utils/cn';

export function InputWithButton() {
  return (
    <div className='w-full max-w-[300px]'>
      <div className='flex flex-col gap-1'>
        <Input.Root>
          <Input.Wrapper>
            <Input.Input placeholder='james@alignui.com' />
          </Input.Wrapper>
          <button
            type='button'
            className={cn(
              'bg-bg-weak-50 text-label-sm text-text-sub-600 inline-flex items-center justify-center rounded-none px-3 py-2 whitespace-nowrap ring-1 ring-transparent transition duration-200 ease-out outline-none ring-inset',
              'hover:bg-bg-white-0 hover:text-text-strong-950',
              'focus-visible:bg-bg-white-0 focus-visible:text-text-strong-950 focus-visible:ring-transparent',
            )}
          >
            Send link
          </button>
        </Input.Root>
      </div>
    </div>
  );
}

const FaqAccordion = () => (
  <div className='flex w-full max-w-[440px] flex-col gap-4'>
    <div className='flex w-full flex-col gap-2'>
      <Accordion.Root
        className='border-stroke-soft-200 bg-bg-white-0 w-full rounded-xl border'
        type='single'
        defaultValue='item-2'
        collapsible
      >
        <Accordion.Item
          value='item-1'
          className='border-stroke-soft-200 hover:bg-bg-weak-50 border-b transition-colors duration-200 first:rounded-t-xl last:rounded-b-xl data-[state=open]:hover:bg-transparent'
        >
          <Accordion.Trigger className='group flex w-full items-center px-4 py-3.5 text-left data-[state=open]:pt-3.5 data-[state=open]:pb-2'>
            <div className='flex w-full items-center gap-4'>
              <div className='flex w-0 flex-1 items-center gap-2.5'>
                <UserCircle className='text-text-soft-400 group-hover:group-data-[state=closed]:text-text-sub-600 size-5 shrink-0' />
                <span className='text-label-sm text-text-sub-600 group-data-[state=open]:text-text-strong-950 truncate text-left'>
                  How do I update my account information?
                </span>
              </div>
              <Plus className='text-text-soft-400 group-hover:group-data-[state=closed]:text-text-sub-600 size-5 group-data-[state=open]:hidden' />
              <Minus className='text-text-soft-400 group-data-[state=open]:text-text-sub-600 group-hover:group-data-[state=closed]:text-text-sub-600 hidden size-5 group-data-[state=open]:block' />
            </div>
          </Accordion.Trigger>
          <Accordion.Content className='data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown overflow-hidden'>
            <div className='pr-[52px] pb-4 pl-[46px]'>
              <p className='text-paragraph-sm text-text-sub-600'>
                To update your account information, please log in to your
                account and navigate to the settings section. From there, you
                can update your personal details, contact information, and other
                relevant information.
              </p>
            </div>
          </Accordion.Content>
        </Accordion.Item>

        <Accordion.Item
          value='item-2'
          className='border-stroke-soft-200 hover:bg-bg-weak-50 border-b transition-colors duration-200 first:rounded-t-xl last:rounded-b-xl data-[state=open]:hover:bg-transparent'
        >
          <Accordion.Trigger className='group flex w-full items-center px-4 py-3.5 text-left data-[state=open]:pt-3.5 data-[state=open]:pb-2'>
            <div className='flex w-full items-center gap-4'>
              <div className='flex w-0 flex-1 items-center gap-2.5'>
                <CreditCard className='text-text-soft-400 group-hover:group-data-[state=closed]:text-text-sub-600 size-5 shrink-0' />
                <span className='text-label-sm text-text-sub-600 group-data-[state=open]:text-text-strong-950 truncate text-left'>
                  What payment methods are accepted?
                </span>
              </div>
              <Plus className='text-text-soft-400 group-hover:group-data-[state=closed]:text-text-sub-600 size-5 group-data-[state=open]:hidden' />
              <Minus className='text-text-soft-400 group-data-[state=open]:text-text-sub-600 group-hover:group-data-[state=closed]:text-text-sub-600 hidden size-5 group-data-[state=open]:block' />
            </div>
          </Accordion.Trigger>
          <Accordion.Content className='data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown overflow-hidden'>
            <div className='pr-[52px] pb-4 pl-[46px]'>
              <p className='text-paragraph-sm text-text-sub-600'>
                Major credit and debit cards like Visa, MasterCard, and American
                Express, as well as digital payment options like PayPal and
                Apple Pay.
              </p>
            </div>
          </Accordion.Content>
        </Accordion.Item>

        <Accordion.Item
          value='item-3'
          className='border-stroke-soft-200 hover:bg-bg-weak-50 border-b transition-colors duration-200 first:rounded-t-xl last:rounded-b-xl data-[state=open]:hover:bg-transparent'
        >
          <Accordion.Trigger className='group flex w-full items-center px-4 py-3.5 text-left data-[state=open]:pt-3.5 data-[state=open]:pb-2'>
            <div className='flex w-full items-center gap-4'>
              <div className='flex w-0 flex-1 items-center gap-2.5'>
                <Repeat2 className='text-text-soft-400 group-hover:group-data-[state=closed]:text-text-sub-600 size-5 shrink-0' />
                <span className='text-label-sm text-text-sub-600 group-data-[state=open]:text-text-strong-950 truncate text-left'>
                  How do I get a refund?
                </span>
              </div>
              <Plus className='text-text-soft-400 group-hover:group-data-[state=closed]:text-text-sub-600 size-5 group-data-[state=open]:hidden' />
              <Minus className='text-text-soft-400 group-data-[state=open]:text-text-sub-600 group-hover:group-data-[state=closed]:text-text-sub-600 hidden size-5 group-data-[state=open]:block' />
            </div>
          </Accordion.Trigger>
          <Accordion.Content className='data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown overflow-hidden'>
            <div className='pr-[52px] pb-4 pl-[46px]'>
              <p className='text-paragraph-sm text-text-sub-600'>
                If you are not satisfied with your purchase, please contact our
                customer support team. We will review your request and process
                the refund as soon as possible.
              </p>
            </div>
          </Accordion.Content>
        </Accordion.Item>

        <Accordion.Item
          value='item-4'
          className='border-stroke-soft-200 hover:bg-bg-weak-50 border-b transition-colors duration-200 first:rounded-t-xl last:rounded-b-xl data-[state=open]:hover:bg-transparent'
        >
          <Accordion.Trigger className='group flex w-full items-center px-4 py-3.5 text-left data-[state=open]:pt-3.5 data-[state=open]:pb-2'>
            <div className='flex w-full items-center gap-4'>
              <div className='flex w-0 flex-1 items-center gap-2.5'>
                <MapPin className='text-text-soft-400 group-hover:group-data-[state=closed]:text-text-sub-600 size-5 shrink-0' />
                <span className='text-label-sm text-text-sub-600 group-data-[state=open]:text-text-strong-950 truncate text-left'>
                  How can I track my order?
                </span>
              </div>
              <Plus className='text-text-soft-400 group-hover:group-data-[state=closed]:text-text-sub-600 size-5 group-data-[state=open]:hidden' />
              <Minus className='text-text-soft-400 group-data-[state=open]:text-text-sub-600 group-hover:group-data-[state=closed]:text-text-sub-600 hidden size-5 group-data-[state=open]:block' />
            </div>
          </Accordion.Trigger>
          <Accordion.Content className='data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown overflow-hidden'>
            <div className='pr-[52px] pb-4 pl-[46px]'>
              <p className='text-paragraph-sm text-text-sub-600'>
                To track your order, please log in to your account and navigate
                to the order history section. You can also use the tracking
                number provided in your order confirmation email to track your
                package.
              </p>
            </div>
          </Accordion.Content>
        </Accordion.Item>

        <Accordion.Item
          value='item-5'
          className='hover:bg-bg-weak-50 transition-colors duration-200 first:rounded-t-xl last:rounded-b-xl data-[state=open]:hover:bg-transparent'
        >
          <Accordion.Trigger className='group flex w-full items-center px-4 py-3.5 text-left data-[state=open]:pt-3.5 data-[state=open]:pb-2'>
            <div className='flex w-full items-center gap-4'>
              <div className='flex w-0 flex-1 items-center gap-2.5'>
                <Lock className='text-text-soft-400 group-hover:group-data-[state=closed]:text-text-sub-600 size-5 shrink-0' />
                <span className='text-label-sm text-text-sub-600 group-data-[state=open]:text-text-strong-950 truncate text-left'>
                  How do I reset my password?
                </span>
              </div>
              <Plus className='text-text-soft-400 group-hover:group-data-[state=closed]:text-text-sub-600 size-5 group-data-[state=open]:hidden' />
              <Minus className='text-text-soft-400 group-data-[state=open]:text-text-sub-600 group-hover:group-data-[state=closed]:text-text-sub-600 hidden size-5 group-data-[state=open]:block' />
            </div>
          </Accordion.Trigger>
          <Accordion.Content className='data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown overflow-hidden'>
            <div className='pr-[52px] pb-4 pl-[46px]'>
              <p className='text-paragraph-sm text-text-sub-600'>
                To reset your password, please click on the forgot password link
                on the login page. You will be asked to enter your email address
                and then follow the instructions to reset your password.
              </p>
            </div>
          </Accordion.Content>
        </Accordion.Item>
      </Accordion.Root>
    </div>
  </div>
);

export default FaqAccordion;