import { LucideIcon } from 'lucide-react';
import { Box } from './Box';
import { Icon } from './Icon';
import { Surface } from './Surface';
import { Text } from './Text';

export interface PresetCardProps {
  title: string;
  description: string;
  icon: LucideIcon;
  onClick: () => void;
  isSelected?: boolean;
}

export const PresetCard = ({ 
  title, 
  description, 
  icon, 
  onClick,
  isSelected = false 
}: PresetCardProps) => {
  return (
    <Surface 
      variant={isSelected ? 'default' : 'muted'} 
      rounded="lg" 
      padding={4} 
      onClick={onClick}
      style={{ 
        cursor: 'pointer', 
        border: isSelected ? '2px solid var(--ui-color-intent-primary)' : '1px solid var(--ui-color-border-default)',
        transition: 'all 0.2s ease-in-out'
      }}
      className="group hover:bg-white/5"
    >
      <Box display="flex" alignItems="start" gap={4}>
        <Box 
          padding={3} 
          rounded="lg" 
          bg={isSelected ? 'var(--ui-color-intent-primary)' : 'var(--ui-color-bg-surface-muted)'}
          className="transition-colors"
        >
          <Icon icon={icon} size={6} intent={isSelected ? 'high' : 'low'} />
        </Box>
        <Box>
          <Text weight="bold" variant="high" block marginBottom={1}>
            {title}
          </Text>
          <Text size="sm" variant="low">
            {description}
          </Text>
        </Box>
      </Box>
    </Surface>
  );
};