import React from 'react';
import type { Solution } from '../data/solutions';
import { SolutionIcon } from './SolutionIcon';

interface SolutionCardProps {
  solution: Solution;
  onClick: () => void;
}

export const SolutionCard: React.FC<SolutionCardProps> = ({ solution, onClick }) => {
  const { slug, name, tagline, color, status, port } = solution;
  return (
    <button
      className="solution-card"
      onClick={onClick}
      style={{ ['--card-color' as string]: color }}
    >
      <div className="solution-card-top">
        <span
          className="solution-card-icon"
          style={{ color, background: `${color}1a`, borderColor: `${color}40` }}
        >
          <SolutionIcon slug={slug} size={28} color={color} />
        </span>
        {status === 'live' ? (
          <span className="badge badge-live">LIVE</span>
        ) : (
          <span className="badge badge-soon">SOON</span>
        )}
      </div>
      <h3 className="solution-card-name">{name}</h3>
      <p className="solution-card-tagline">{tagline}</p>
      <div className="solution-card-foot">
        <span className="solution-card-port">:{port}</span>
        <span className="solution-card-more" style={{ color }}>
          상세 보기
          <SolutionIcon slug="chevron-right" size={14} color={color} />
        </span>
      </div>
    </button>
  );
};

export default SolutionCard;
