import React from 'react';
import styles from './silke-theme-card.module.scss';
import { SilkeText } from '../silke-text';
import { SilkeTag } from '../silke-tag';
import { SilkeOverflowMenu, SilkeOverflowMenuItem } from '../silke-overflow-menu';

interface SilkeThemeCardProps {
  name: string;
  description?: string;
  primaryColor?: string;
  secondaryColor?: string;
  accentColor?: string;
  bgColor?: string;
  textColor?: string;
  baseFont?: string;
  isDefault?: boolean;
  isSelected?: boolean;
  onClick?: () => void;
  menu?: (SilkeOverflowMenuItem | React.ReactElement | 'divider')[];
}

export function SilkeThemeCard({
  name,
  description,
  primaryColor,
  secondaryColor,
  accentColor,
  bgColor,
  textColor,
  baseFont,
  isDefault,
  isSelected,
  onClick,
  menu,
}: SilkeThemeCardProps) {
  return (
    <div className={styles.themeCard} onClick={onClick}>
      <div className={styles.inner} style={{ background: bgColor }}>
        <div className={styles.preview}>
          <span
            className={styles.previewText}
            style={{
              fontFamily: baseFont || 'inherit',
              color: textColor,
            }}
          >
            Aa
          </span>
        </div>
        <div className={styles.colorStrip}>
          <div className={styles.colorStripItem} style={{ background: primaryColor }} />
          <div className={styles.colorStripItem} style={{ background: secondaryColor }} />
          <div className={styles.colorStripItem} style={{ background: accentColor }} />
        </div>
        <div className={styles.tags}>
          {isDefault && <SilkeTag kind="secondary" label="Default" />}
          {isSelected && <SilkeTag kind="secondary" label="Selected" />}
        </div>
      </div>
      <div className={styles.body}>
        <div className={styles.info}>
          <SilkeText>{name}</SilkeText>
          {description && (
            <SilkeText size="small" color="neutral-70">
              {description}
            </SilkeText>
          )}
        </div>
        {menu && (
          <div onClick={(e) => e.stopPropagation()}>
            <SilkeOverflowMenu
              size="s"
              items={menu}
              targetOrigin="top-right"
              anchorOrigin="bottom-right"
            />
          </div>
        )}
      </div>
    </div>
  );
}