import React from 'react';
import { Button, Link, Paper } from '@mui/material';
import LaunchIcon from '@mui/icons-material/Launch';

function Registry() {
  return (
    <div
      style={{
        height: '100%',
        width: '100%',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <Paper
        elevation={3}
        sx={{
          '&:hover': { boxShadow: 5 },
          width: { xs: '90%', md: 400 },
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          flexDirection: 'column',
          px: 1,
          pb: 2,
          borderRadius: 2,
        }}
      >
        <p style={{ textAlign: 'center' }}>
          Thank you for your generous gifts! We look forward to seeing you at
          the wedding.
        </p>
        <Button
          href="https://www.amazon.com/wedding/registry/33T04KKOSHVVE"
          variant="contained"
          endIcon={<LaunchIcon />}
        >
          Registry
        </Button>
      </Paper>
    </div>
  );
}

export default Registry;