import { useSession } from 'next-auth/react';
import { useLocalization } from '@akinon/next/hooks';
import { Icon } from '@theme/components';
import AccordionSection, { SectionStatus } from '../accordion-section';

interface ContactSectionProps {
  status: SectionStatus;
  onEdit: () => void;
}

const ContactSection = ({ status, onEdit }: ContactSectionProps) => {
  const { t } = useLocalization();
  const { data: session } = useSession();

  const isGuest = !session?.user;
  const email =
    session?.user?.email || t('checkout.one_page.contact.guest_user');
  const displayName = session?.user?.name || email;

  const summary = (
    <div className="flex items-center gap-2 text-sm text-black-700">
      <Icon name="email" size={14} />
      <span>{email}</span>
      {isGuest && (
        <span className="ml-2 rounded-sm border border-gray-400 px-2 py-0.5 text-xs uppercase text-gray-700">
          {t('checkout.one_page.contact.guest_badge')}
        </span>
      )}
    </div>
  );

  return (
    <AccordionSection
      step={1}
      title={t('checkout.one_page.contact.title')}
      status={status}
      onEdit={onEdit}
      editable={false}
      summary={summary}
      dataTestId="one-page-contact"
    >
      <div className="flex flex-col gap-3">
        <div className="flex items-start gap-3 rounded-sm border border-gray-200 bg-gray-50 px-4 py-3">
          <Icon name="account" size={18} className="mt-0.5 fill-secondary" />
          <div className="flex flex-col">
            <span className="text-sm font-medium text-black-800">
              {displayName}
            </span>
            <span className="text-xs text-black-700">{email}</span>
            {isGuest && (
              <span className="mt-1 text-xs italic text-gray-700">
                {t('checkout.one_page.contact.guest_note')}
              </span>
            )}
          </div>
        </div>
      </div>
    </AccordionSection>
  );
};

export default ContactSection;