interface ChartPlaceholderProps {
  text: string;
  height?: string;
  colorScheme?: 'blue' | 'green' | 'red' | 'purple' | 'teal' | 'orange' | 'pink' | 'yellow';
}

export default function ChartPlaceholder({ 
  text, 
  height = "h-64",
  colorScheme = 'blue'
}: ChartPlaceholderProps) {
  const borderColor = {
    blue: 'border-accent-blue',
    green: 'border-accent-green',
    red: 'border-accent-red',
    purple: 'border-accent-purple',
    teal: 'border-accent-teal',
    orange: 'border-accent-orange',
    pink: 'border-accent-pink',
    yellow: 'border-accent-yellow',
  }[colorScheme];
  
  const textColor = {
    blue: 'text-accent-blue',
    green: 'text-accent-green',
    red: 'text-accent-red',
    purple: 'text-accent-purple',
    teal: 'text-accent-teal',
    orange: 'text-accent-orange',
    pink: 'text-accent-pink',
    yellow: 'text-accent-yellow',
  }[colorScheme];
  
  return (
    <div className={`${height} flex items-center justify-center bg-card-bg bg-opacity-50 rounded-md border-2 border-dashed ${borderColor}`}>
      <div className="text-center">
        <div className="mx-auto w-12 h-12 mb-3 rounded-full bg-background flex items-center justify-center">
          <svg className={`w-6 h-6 ${textColor}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
          </svg>
        </div>
        <p className={`${textColor} text-sm font-medium`}>{text}</p>
      </div>
    </div>
  );
}