import { Box, Typography } from '@mui/material'
import type { ChatStarterProps } from '../types'
import { ChatSuggestionButton } from '../bubbles/chat-suggestion-button'
import { styles } from './styles'

const DEFAULT_PALETTE = [
  '#C9DB7440', // pastel green
  '#FE88B140', // pastel red
  '#9EB9F340', // pastel blue
  '#F6CF7140', // pastel yellow
]

export function ChatStarter({
  icon,
  title,
  description,
  items,
  size = 'small',
  onSelect,
  sx,
}: ChatStarterProps) {
  const fullItems = items.map((item, index) => {
    if (typeof item === 'string') {
      return {
        label: item,
        color: DEFAULT_PALETTE[index],
      }
    } else {
      return {
        label: item.label,
        color: item.color ?? DEFAULT_PALETTE[index],
      }
    }
  })
  return (
    <Box
      sx={{
        ...styles.starter,
        gap: size === 'small' ? 1 : 2,
        ...sx,
      }}
    >
      {icon}
      {title && (
        <Typography variant={size === 'small' ? 'h6' : 'h5'}>
          {title}
        </Typography>
      )}
      {description && (
        <Typography
          variant={size === 'small' ? 'body2' : 'body1'}
          color='text.secondary'
        >
          {description}
        </Typography>
      )}
      <Box
        sx={{
          ...styles.starterItems,
          gap: size === 'small' ? 1 : 2,
          ...(items.length > 2 ? styles.starterItemsTwoCol : undefined),
        }}
      >
        {fullItems.map((item, i) => (
          <ChatSuggestionButton
            key={i}
            label={item.label}
            onClick={() => onSelect?.(item.label)}
            color={item.color}
          />
        ))}
      </Box>
    </Box>
  )
}