import React from 'react';
import Image from 'next/image';

import {StyledHeader, Subtitle, StyledSection, SectionImage, Title} from './styles';

interface SectionProps {
  children: React.ReactNode;
}

interface SectionHeaderProps {
  src: string;
  title: string;
  subtitle: string;
  id?: string;
}

export const SectionHeader: React.FC<SectionHeaderProps> = ({src, title, subtitle, id}): JSX.Element => {
  return (
    <StyledHeader id={id}>
      <SectionImage>
        <Image src={src} layout="fill" />
      </SectionImage>
      <Subtitle>{subtitle}</Subtitle>
      <Title>{title}</Title>
    </StyledHeader>
  );
};

export const Section: React.FC<SectionProps> = ({children}): JSX.Element => {
  return <StyledSection>{children}</StyledSection>;
};