import React from 'react';
import { useTranslation } from '@/hooks/useI18n.tsx';
import { Organization } from '@/types.ts';
import { BadgeCheck, Briefcase } from 'lucide-react';
import MetricItem from '@/components/ui/MetricItem.tsx';
import { Grid } from '@/components/ui/layout';

interface KeyMetricsProps {
  organization: Organization;
}

const KeyMetrics = ({ organization }: KeyMetricsProps) => {
  const { t } = useTranslation();
  return (
    <Grid cols={{ sm: 2 }} gap="md">
      <MetricItem
        icon={
          <BadgeCheck
            className={`h-5 w-5 ${organization.Verified ? 'text-success' : 'text-muted-foreground'}`}
          />
        }
        label={t('organizationPage.verifiedStatus')}
        value={
          <span
            className={`font-semibold ${organization.Verified ? 'text-success' : 'text-muted-foreground'}`}
          >
            {organization.Verified
              ? t('organizationPage.verified')
              : t('organizationPage.notVerified')}
          </span>
        }
      />
      {organization.Website && (
        <MetricItem
          icon={<Briefcase className="h-4 h-5 text-current w-4 w-5" />}
          label={t('organizationPage.website')}
          value={
            <a
              href={organization.Website}
              target="_blank"
              rel="noopener noreferrer"
              className="text-primary hover:underline"
            >
              {organization.Website.replace(/^(https?:\/\/)?(www\.)?/, '')}
            </a>
          }
        />
      )}
    </Grid>
  );
};

export default React.memo(KeyMetrics);