import { Box, Card, TextField, Typography } from '@mui/material'

interface Props {
  name: string
  onNameChange: (v: string) => void
  email: string
  onEmailChange: (v: string) => void
  phone: string
  onPhoneChange: (v: string) => void
}

export function ContactSection({ name, onNameChange, email, onEmailChange, phone, onPhoneChange }: Props) {
  return (
    <Card sx={{ p: 3, mb: 3 }}>
      <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 2 }}>Kontakt (optional)</Typography>
      <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2 }}>
        <TextField
          label="Name" value={name}
          onChange={e => onNameChange(e.target.value)} size="small" fullWidth
        />
        <TextField
          label="Telefon" value={phone}
          onChange={e => onPhoneChange(e.target.value)} size="small" fullWidth
        />
        <TextField
          label="E-Mail" value={email}
          onChange={e => onEmailChange(e.target.value)}
          size="small" type="email" fullWidth sx={{ gridColumn: '1 / -1' }}
        />
      </Box>
    </Card>
  )
}
