Rotate

import type { ComponentProps } from 'react';
import { Collapsible } from '@base-ui/react/collapsible';

export function ShippingDetails() {
  return (
    <Collapsible.Root className='w-80 rounded-xl border'>
      <Collapsible.Trigger className='group flex w-full items-center justify-between px-4 py-3 text-sm font-medium'>
        Shipping and returns
        {/* Turn half a circle when the panel opens, around the icon's center. */}
        <ChevronDownIcon className='size-4 transition-transform duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] group-data-panel-open:rotate-180 motion-reduce:transition-none' />
      </Collapsible.Trigger>
      <Collapsible.Panel className='px-4 pb-4 text-sm text-muted-foreground'>
        Orders over $50 ship free. Return anything within 30 days for a full
        refund.
      </Collapsible.Panel>
    </Collapsible.Root>
  );
}

function ChevronDownIcon(props: ComponentProps<'svg'>) {
  return (
    <svg
      viewBox='0 0 16 16'
      fill='none'
      stroke='currentColor'
      strokeWidth={1.5}
      aria-hidden='true'
      {...props}
    >
      <path d='m4 6 4 4 4-4' />
    </svg>
  );
}