import React from 'react'

interface ComponentCardProps {
  title: string
  desc: string
  href: string
  children: React.ReactNode
}

const cardStyle: React.CSSProperties = {
  display: 'flex',
  flexDirection: 'column',
  border: '1px solid #e8e8e8',
  borderRadius: 8,
  textDecoration: 'none',
  color: 'inherit',
  transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
  background: '#fff',
  overflow: 'hidden',
}

const previewStyle: React.CSSProperties = {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  padding: '28px 16px 20px',
  background: '#fafafa',
  minHeight: 72,
  borderBottom: '1px solid #f0f0f0',
  flexWrap: 'wrap',
  gap: 8,
}

const infoStyle: React.CSSProperties = {
  padding: '14px 16px',
  flex: 1,
}

const titleStyle: React.CSSProperties = {
  fontWeight: 500,
  fontSize: 14,
  color: 'rgba(0, 0, 0, 0.88)',
  marginBottom: 2,
}

const descStyle: React.CSSProperties = {
  fontSize: 12,
  color: 'rgba(0, 0, 0, 0.45)',
  lineHeight: 1.4,
}

export const ComponentCard: React.FC<ComponentCardProps> = ({ title, desc, href, children }) => {
  const [hovered, setHovered] = React.useState(false)

  const currentStyle: React.CSSProperties = {
    ...cardStyle,
    ...(hovered
      ? {
          borderColor: '#1890ff',
          boxShadow: '0 4px 12px rgba(24, 144, 255, 0.15)',
          transform: 'translateY(-2px)',
        }
      : {}),
  }

  return (
    <a
      href={href}
      style={currentStyle}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      <div style={previewStyle}>{children}</div>
      <div style={infoStyle}>
        <div style={titleStyle}>{title}</div>
        <div style={descStyle}>{desc}</div>
      </div>
    </a>
  )
}

export default ComponentCard