# Defaults: ProductDetails (/themes/sdk/reference/product/defaults-4)

```ts
import { … } from '@poltura/theme-sdk/product';
```

## `ProductDetails` [#productdetails]

The product's key attributes, then where it can be activated and whether it works in the shopper's country; nothing for a product with neither.

```ts
ProductDetails(props: ProductDetailsProps): ReactElement | null
```

**Props:** [`ProductDetailsProps`](/themes/sdk/reference/product/types-7#productdetailsprops)

<Tab value='Example'>

```tsx
import { ProductDetails } from '@poltura/theme-sdk/product';

export function Compatibility() {
  return <ProductDetails className='mt-4' />;
}
```

</Tab>
<Tab value='Source'>

```tsx title="source/product-details.tsx"
import { useMemo, type ReactElement } from 'react';
import { AlertTriangle, CheckCircle2, CircleX, Globe, Info } from 'lucide-react';
import { useLocale, useTranslations } from '@poltura/theme-sdk/i18n';
import {
  ProductKeySpecs,
  useOptionalProductPage,
  type ProductDetailsProps,
} from '@poltura/theme-sdk/product';
import { useMarket } from '@poltura/theme-sdk/store';
import { Tooltip, cn } from '@poltura/theme-sdk/ui';

function countryName(locale: string, code: string): string {
  try {
    return new Intl.DisplayNames([locale], { type: 'region' }).of(code) ?? code;
  } catch {
    return code;
  }
}

const COVERED = {
  box: 'border-emerald-200/80 bg-emerald-50/70 dark:border-emerald-800/60 dark:bg-emerald-950/20',
  icon: 'bg-emerald-100/80 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300',
  eyebrow: 'text-emerald-700/75 dark:text-emerald-400/80',
  summary: 'text-emerald-900 dark:text-emerald-100',
};

const NOT_COVERED = {
  box: 'bg-primary/5 border-primary/25',
  icon: 'bg-primary/20 text-primary',
  eyebrow: 'text-primary/70',
  summary: 'text-primary-active',
};

export function ProductDetails({ className }: ProductDetailsProps): ReactElement | null {
  const page = useOptionalProductPage();
  const { country } = useMarket();
  const t = useTranslations('product');
  const locale = useLocale();
  const list = useMemo(
    () => new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' }),
    [locale],
  );
  const coverage = page?.coverage ?? null;
  if (coverage === null) return <ProductKeySpecs className={className} />;
  const worldwide = t('coverage.territoriesStandalone.WORLDWIDE');
  const region =
    coverage.included.length > 0
      ? list.format(coverage.included.map((target) => target.label))
      : worldwide;
  const excluded = list.format(coverage.excluded.map((target) => target.label));
  const market = country ? countryName(locale, country) : worldwide;
  const notice = !country
    ? t('coverage.noticeGlobal')
    : coverage.coversMarket
      ? t('coverage.noticeCurrentCountryAvailable', { country: market })
      : t('coverage.noticeCurrentCountryUnavailable', { country: market });
  const tone = coverage.coversMarket ? COVERED : NOT_COVERED;
  return (
    <div className={cn('space-y-4', className)}>
      <ProductKeySpecs />
      <div className='flex items-center gap-3 rounded-lg border border-transparent bg-surface p-3 transition-colors hover:border-border hover:bg-primary/5'>
        <div className='flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary'>
          <Globe className='h-5 w-5' />
        </div>
        <div className='min-w-0 flex-1'>
          <p className='text-xs font-medium uppercase text-muted-foreground'>
            {t('activationRegion')}
          </p>
          <div className='mt-1 flex items-center gap-2'>
            <p className='break-words text-sm font-semibold leading-snug text-foreground'>
              {region}
            </p>
            {coverage.excluded.length > 0 ? (
              <Tooltip content={t('coverage.exclusionsTooltip', { excluded })}>
                <AlertTriangle className='h-4 w-4 shrink-0 cursor-help text-amber-600' />
              </Tooltip>
            ) : null}
          </div>
        </div>
        <div className='ml-auto shrink-0'>
          <Tooltip content={t('coverage.regionTooltip', { region })}>
            <Info className='h-4 w-4 cursor-help text-muted-foreground' />
          </Tooltip>
        </div>
      </div>
      <div className={cn('flex items-center gap-3 rounded-lg border p-3.5', tone.box)}>
        <div
          className={cn(
            'flex h-10 w-10 shrink-0 items-center justify-center rounded-lg',
            tone.icon,
          )}
        >
          {coverage.coversMarket ? (
            <CheckCircle2 className='h-5 w-5' />
          ) : (
            <CircleX className='h-5 w-5' />
          )}
        </div>
        <div className='min-w-0'>
          <p
            className={cn(
              'mb-1 text-[10px] font-bold uppercase leading-none tracking-widest',
              tone.eyebrow,
            )}
          >
            {t('activation')}
          </p>
          <p className={cn('break-words text-base font-extrabold leading-snug', tone.summary)}>
            {notice}
          </p>
        </div>
      </div>
    </div>
  );
}
```

</Tab>


**See also:** [`useProductPage`](/themes/sdk/reference/product/hooks-2#useproductpage), [`ProductKeySpecs`](/themes/sdk/reference/product/parts-2#productkeyspecs)