import type { LookupServiceLinks } from '~/lib/songwhipApi/types';

import Box from '~/src/components/Box';
import Card from '~/src/components/Card';
import Text from '~/src/components/Text';
import { useI18n } from '~/src/lib/i18n';
import { CORE_SERVICES } from './constants';
import { CustomServiceLink } from './CustomServiceLink';

export const CustomServiceLinks = ({
  links,
}: {
  links: LookupServiceLinks;
}) => {
  const { t } = useI18n('prerelease');

  return (
    <Card padding="2rem" testId="customServiceLinks">
      <Box flexColumn gap="1rem" margin="0 0 2rem">
        <Text tag="h2" isBold size="1.5rem">
          {t('customServiceLinks')}
        </Text>
        <Text color="#666" size="1.35rem">
          {t('customServiceLinksDescription')}
        </Text>
      </Box>

      <Box flexColumn gap="2rem">
        {CORE_SERVICES.map((service) => (
          <CustomServiceLink
            key={service}
            service={service}
            link={links[service]}
          />
        ))}
      </Box>
    </Card>
  );
};