import { Typography } from 'antd';
import { Link } from 'react-router-dom';
import { RightOutlined } from '@ant-design/icons';

const { Title } = Typography;

interface HomepageSectionProps {
  title: string;
  viewAllLink?: string;
  viewAllLabel?: string;
  children: React.ReactNode;
}

export default function HomepageSection({ title, viewAllLink, viewAllLabel = 'View all', children }: HomepageSectionProps) {
  return (
    <section style={{ marginBottom: 40 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
        <Title level={4} style={{ margin: 0, color: '#fff' }}>{title}</Title>
        {viewAllLink && (
          <Link
            to={viewAllLink}
            style={{ color: 'rgba(255,255,255,0.55)', fontSize: 13, display: 'flex', alignItems: 'center', gap: 4 }}
          >
            {viewAllLabel} <RightOutlined style={{ fontSize: 10 }} />
          </Link>
        )}
      </div>
      {children}
    </section>
  );
}
