import { Text } from 'react-native';

import { Card } from './card';

export const MetricCard = ({
  label,
  value,
  note,
}: {
  label: string;
  value: string | number;
  note?: string;
}) => (
  <Card className='flex-1'>
    <Text className='text-muted-foreground text-xs'>{label}</Text>
    <Text className='text-foreground mt-2 text-2xl font-bold'>{value}</Text>
    {note ? (
      <Text className='text-muted-foreground mt-1 text-xs'>{note}</Text>
    ) : null}
  </Card>
);
