import { ActionLink } from '@/components/actions/ActionLink';
import { Icon, type ApprovedIconName } from '@/components/foundation/Icon';
import { Card } from '@/components/surfaces/Card';
import { Heading, Text, type HeadingLevel } from '@/components/typography/Typography';
import styles from './FeatureCard.module.css';

interface FeatureCardProps {
  title: string;
  description: string;
  icon?: ApprovedIconName;
  headingLevel?: HeadingLevel;
  emphasis?: 'default' | 'primary' | 'muted';
  action?: { label: string; href: string; disabledReason?: string };
}

export function FeatureCard({
  title,
  description,
  icon,
  headingLevel = 3,
  emphasis = 'default',
  action,
}: FeatureCardProps) {
  return (
    <Card
      tone={emphasis === 'muted' ? 'muted' : emphasis === 'primary' ? 'elevated' : 'default'}
      className={styles.card}
    >
      {icon ? (
        <span className={styles.icon}>
          <Icon name={icon} size="lg" />
        </span>
      ) : null}
      <Heading level={headingLevel} appearance="subheading">
        {title}
      </Heading>
      <Text variant="supporting">{description}</Text>
      {action ? (
        <ActionLink
          href={action.href}
          variant="standalone"
          icon="arrow-forward"
          {...(action.disabledReason ? { disabledReason: action.disabledReason } : {})}
        >
          {action.label}
        </ActionLink>
      ) : null}
    </Card>
  );
}
